WEB开发网
开发学院软件开发Java 使用 Dojo 提供的灵活多样的布局方式 阅读

使用 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> 

1 2 3 4 5 6  下一页

Tags:使用 Dojo 提供

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接