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

使用Dojo提供的灵活多样的布局方式2011-08-17 IBM 陈悦徐文霞简介：Dojo 提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。本文从常见的几种控件出发，介绍 Dojo 常见的布局方式。

前言

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>