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

简介：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>

时间： 2024-07-30 23:32:32

使用Dojo提供的灵活多样的布局方式的相关文章

常用企业网站布局方式

  一.大框套小框的布局 这种布局方式即是我在上面提到的常见的布局,不是说这种布局方式一无是处,但我们总不能只会这一种布局方式,次次套用吧?按照这种布局当然也可以做出来漂亮的设计,但毕竟方框限制的视线的扩展,如果客户要求做出大气的感觉,一般不会按照这种方式来布局,通常来讲,大气意味着开阔视野. 二.通栏布局 这种布局方式让视线不再受到方框的限制,比起上面的布局方式,自然多了些大气.开阔的味道来.另外,主视觉部分还可以灵活处理,既可以向上拓展到logo和导航的顶部位置,也可以向下拓展到内容区域,这

浅析iPhone平台 三种应用类型的布局方式

在手机这样一个小小的有限的屏幕尺寸里,要使界面保持清晰合理.简洁美观,就涉及到产品"框架布局"的设计问题,我们需要根据不同的产品需求及应用场景来设计合理的界面布局. iPhone平台的标准界面布局为顶部标题栏.中部内容区.底部工具栏/标签栏,设计师们根据不同的应用类型以及不同的使用情境进行着巧妙的布局,其中不乏很多勇于打破常规,精巧合理的布局设计.今天就一起来看看iPhone平台多样化的界面布局方式. iPhone平台有三种类型的应用: 效率型应用(Productivity Appli

Android 开发之旅：view的几种布局方式及实践

引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是"Hello World!" 我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用"Hello World!"程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线

Android 开发之旅：详解view的几种布局方式及实践_Android

引言 我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用"Hello World!"程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布局(Tab Layo

Android开发之基本控件和四种布局方式详解_Android

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

浅析iPhone平台三种应用类型的布局方式

在手机这样一个小小的有限的屏幕尺寸里,要使界面保持清晰合理.简洁美观,就涉及到产品"框架布局"的设计问题,我们需要根据不同的产品需求及应用场景来设计合理的界面布局. iPhone平台的标准界面布局为顶部标题栏.中部内容区.底部工具栏/标签栏,设计师们根据不同的应用类型以及不同的使用情境进行着巧妙的布局,其中不乏很多勇于打破常规,精巧合理的布局设计.今天就一起来看看iPhone平台多样化的界面布局方式. iPhone平台有三种类型的应用:效率型应用(Productivity Applic

Android开发之基本控件和四种布局方式详解

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Android 开发之旅：详解view的几种布局方式及实践

引言 我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用"Hello World!"程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布局(Tab Layo

DIV与Table两种页面布局方式在大型网站的可用性比较

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. 用DIV进行排版的优势就是我不说,大家应该都比较清楚.DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改