dojo界面布局初体验

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_33979363

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量155

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yelloweast/archive/2012/02/12/2347886.html

版权

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

一、dojo布局控件概述

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

二、搭建界面

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

View Code

< body class ="claro" >
     < div id ="mainWindow" dojotype ="dijit.layout.BorderContainer" design ="headline"
        gutters ="false" style ="width:100%; height:100%;" >
         < div id ="header" dojotype ="dijit.layout.ContentPane" region ="top" >
            这是网站标题栏
         </ div >
         < div id ="rightPane" dojotype ="dijit.layout.TabContainer" region ="right" >
             < div dojotype ="dijit.layout.ContentPane" title = "Tab 1" selected ="true" >
                第一页
             </ div >
             < div dojotype ="dijit.layout.ContentPane"   title ="Tab 2" >
                第二页
             </ div >
         </ div >
         < div id ="leftPane" dojotype ="dijit.layout.AccordionContainer" region ="left" >
            左边栏
         </ div >
         < div id ="centerPane" dojotype ="dijit.layout.SplitContainer" region ="center" >
            中间内容
         </ div >
         < div id ="footer" dojotype ="dijit.layout.StackContainer" region ="bottom" >
            网站底部
         </ div >
     </ div >
</ body >

2.为这些控件设置样式属性，css代码如下：

View Code

3.引用相应的dojo包，js代码如下：

View Code

4.别忘了要添加dojo的css和js引用哦，完整的代码如下：

View Code

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta http-equiv ="X-UA-Compatible" content ="IE=7" />
     < title ></ title >
     < link href ="dojo/dijit/themes/claro/claro.css" rel ="stylesheet" type ="text/css" />
     < style type ="text/css" >
      html, body {
        height : 100% ; width : 100% ; margin : 0 ;
       }
      body {
        background-color : white ; overflow : hidden ;
        font-family : "Trebuchet MS" ;
       }
      .roundedCorners {
        -moz-border-radius : 4px ;
       }
      #header {
        border : solid 2px #7EABCD ;
        background-color : white ;
        color : blue ;
        font-size : 18pt ;
        text-align : center ;
        font-weight : bold ;
        height : 60px ;
       }
      #leftPane {
        background-color : yellow ;
        color : red ;
        border : solid 2px cornflowerblue ;
        width : 250px ;
        height : 300px ;
        overflow : hidden ;
       }
      #rightPane {
        background-color : green ;
        color : yellow ;
        border : solid 2px cornflowerblue ;
        width : 250px ;
        height : 300px ;
        overflow : hidden ;
       }
      #centerPane {
        background-color : orange ;
        color : blue ;
        border : solid 2px cornflowerblue ;
        overflow : hidden ;
       }
      #footer {
        border : solid 2px #7EABCD ;
        background-color : white ;
        color : blue ;
        font-size : 10pt ;
        text-align : center ;
        height : 40px ;
       }
     </ style >
     < script type ="text/javascript" >
             var djConfig = {
                parseOnLoad: true
            };
     </ script >
     < script type ="text/javascript" src ="dojo/dojo/dojo.js" ></ script >
     < script type ="text/javascript" >
        dojo.require( " dijit.layout.BorderContainer " );
        dojo.require( " dijit.layout.ContentPane " );
        dojo.require( " dijit.layout.AccordionContainer " );
        dojo.require( " dijit.layout.TabContainer " );
        dojo.require( " dijit.layout.SplitContainer " );
        dojo.require( " dijit.layout.StackContainer " );

     </ script >
</ head >
< body class ="claro" >
     < div id ="mainWindow" dojotype ="dijit.layout.BorderContainer" design ="headline"
        gutters ="false" style ="width:100%; height:100%;" >
         < div id ="header" dojotype ="dijit.layout.ContentPane" region ="top" >
            这是网站标题栏
         </ div >
         < div id ="rightPane" dojotype ="dijit.layout.TabContainer" region ="right" >
             < div dojotype ="dijit.layout.ContentPane" title = "Tab 1" selected ="true" >
                第一页
             </ div >
             < div dojotype ="dijit.layout.ContentPane"   title ="Tab 2" >
                第二页
             </ div >
         </ div >
         < div id ="leftPane" dojotype ="dijit.layout.AccordionContainer" region ="left" >
            左边栏
         </ div >
         < div id ="centerPane" dojotype ="dijit.layout.SplitContainer" region ="center" >
            中间内容
         </ div >
         < div id ="footer" dojotype ="dijit.layout.StackContainer" region ="bottom" >
            网站底部
         </ div >
     </ div >
</ body >
</ html >

三、特别说明

1.请特别注意包引用的顺序和js代码编写的顺序，尤其是在下面这段代码：

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

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

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

转载于:https://www.cnblogs.com/yelloweast/archive/2012/02/12/2347886.html

weixin_33979363

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo界面布局初体验

使用dojo的布局控件，可以快速搭建界面，今天刚好研究了一下，中间遇到很崩溃的问题，还好最后解决了。一、dojo布局控件概述 dojo中最基本的布局控件应该是BorderContainer了，他应该作为<body></body>中的第一个元素。BorderContainer可以作为其他常用布局控件的容器（如AccordionContainer、ContentPane、...
复制链接

扫一扫