使用 Dojo 提供的灵活多样的布局方式

　2010-08-06 00:00:00　来源：WEB开发网　　　

核心提示：前言Dojo 提供了多种基本的布局方式，使用这些布局，使用 Dojo 提供的灵活多样的布局方式，可以有层次，有意义的组织控件，是各种布局的基本元素，ContentPane 的功能类似于 iFrame，使得 web 界面获得更好的用户体验，下面将从常见的几种控件出发

前言

Dojo 提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。

下面将从常见的几种控件出发，介绍 Dojo 常见的布局方式，让我们一起学习 Dojo 灵活而又丰富的布局方式。

基本布局方式

Dojo 基本布局方式主要体现在下列几种控件：

ContentPane (dijit.layout.ConentPane)

TitlePane (dijit.TitlePane)

FloatingPane (dojox.layout.FloatingPane)

ScrollPane(dojox.layout.ScrollPane)

BorderContainer (dijit.layout.BorderContainer)

ContentPane (dijit.layout.ConentPane)

ContentPane，顾名思义，就是用于放置若干内容的面板，是各种布局的基本元素。ContentPane 的功能类似于 iFrame。除此之外 ContentPane 还可以与其他 Layout 控件互相嵌套。首先看一个最简单的 ContentPane 的例子：

清单 1. ContentPane 声明法示例

　<head>　　<link　rel="stylesheet"　type="text/css"　href="ibmdojo/dijit/themes/soria/soria.css">　　<style　type="text/css">　　body,　html　{　font-family:helvetica,arial,sans-serif;　font-size:90%;　}　　</style>　　</head>　　<script　type="text/javascript"　src="ibmdojo/dojo/dojo.js"　djConfig="parseOnLoad:true">　　</script>　　<script　type="text/javascript">　　dojo.require("dijit.layout.ContentPane");　　</script>　　<body　class="soria">　　　　　<div　dojoType="dijit.layout.ContentPane"　id="myFirstContentPane"　　href="TestContentPane.html">　　</div>　　</body>　