dojo的布局控件

使用dojo的布局控件&＃xff0c;可以快速搭建界面&＃xff0c;今天刚好研究了一下&＃xff0c;中间遇到很崩溃的问题&＃xff0c;还好最后解决了。

一、dojo布局控件概述

    dojo中最基本的布局控件应该是BorderContainer了&＃xff0c;他应该作为中的第一个元素。 BorderContainer可以作为其他常用布局控件的容器&＃xff08;如AccordionContainer、ContentPane、 TabContainer、StackContainer、SplitContainer&＃xff09;&＃xff0c;最多可以容纳5个其他的布局控件&＃xff08;也可以再次容纳 BorderContainer以便嵌套使用&＃xff09;。这5个布局控件分布占据&＃xff1a;top、bottom、left、right、center的位置&＃xff0c;他们的排列有两种方式&＃xff1a;headline&＃xff08;3行&＃xff0c;其中第一行是top&＃xff0c;第三行是bottom&＃xff0c;第二行则是left、center和right&＃xff09;&＃xff1b;sidebar&＃xff08;3 列&＃xff0c;其中第一列是left&＃xff0c;第三列是right&＃xff0c;第二列则是top、center和bottom&＃xff09;。两种排列如下图所示&＃xff1a;

 二、搭建界面

     1.这里我们采用headline的方式来搭建一个界面&＃xff0c;看看布局的总体效果即可。html代码如下&＃xff1a;

View Code

     2.为这些控件设置样式属性&＃xff0c;css代码如下&＃xff1a;

View Code

    3.引用相应的dojo包&＃xff0c;js代码如下&＃xff1a;

View Code

    4.别忘了要添加dojo的css和js引用哦&＃xff0c;完整的代码如下&＃xff1a;

View Code

 三、特别说明

   1.请特别注意包引用的顺序和js代码编写的顺序&＃xff0c;尤其是在下面这段代码&＃xff1a;

 这段代码必须要在添加dojo.js之前执行&＃xff0c;这样才能保证dojo的控件样式被应用&＃xff0c;否则&＃xff0c;将按照普通的html控件进行解析。我被这个破问题折腾了一上午&＃xff0c;才发现是顺序的问题&＃xff0c;笨啊&＃xff01;

    2.dojo.require引用相应的控件也是必须&＃xff0c;否则同样无法解析出dojo的控件样式。

    3.这里只是简单看了下基本的布局&＃xff0c;对于门外汉来说&＃xff0c;竟然如此折腾&＃xff0c;真是隔行如隔山呐。