使用 Dojo 提供的灵活多样的布局方式
2010-08-06 00:00:00 来源: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>
更多精彩
赞助商链接