初识DOJO（2）DOJO页面布局教程例子

- 日理万妓 2022-04-24 13:44 287阅读 0赞

学习dojo，首先都会学习到如何对dojo的页面进行布局。dojo的页面是有很多个div组成的，主要需要引入组件是dijit.layout。

dijit.layout在dojo的在线API中有十分详细的介绍，国内网站上也能搜索到大量的布局教程，但是大多都是针对dojo1.6或1.7版本的，我接触dojo的时候是1.8，在我写这篇博文的时候dojo在官网已经推出1.9这个兼容IE10的版本了，建议大家（只是建议）用dojo的新版本，新版本绝对更加完善，慢慢的你就会发现的。

好了，下面我先将我的想法与大家分享一下：

1.  首先根据以往我们web开发的经验，我们需要一个index.jsp这个首页，然后就是一个iframe框架，我的理解就是通过登陆页面之后，用dojo代替iframe；
2.  以往我们会在iframe的left页面写一棵树，点击树的节点在right页面打开页面；那么dojo也是这样一个流程，唯一不通的就是iframe有几个页面，dojo只需要一个页面就OK了；
3.  关于引包，dojo的引包顺序要注意，什么包在前，什么包在后，如果你发现页面样式混乱，不放将一些包的位置换换，也许就能解决。

好了，不多说了，直接贴代码：

*  首先是页面布局

<div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true"  id="borderContainer" style="position:static; width: 100%;height: 100%;">
    　
    <div id="markupAccordion" data-dojo-type="dijit/layout/AccordionContainer" splitter="true"region="leading"style="width:　200px;">

<div id="pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='selected:true,
    			title:"菜单树", iconClass:"dijitDisabled dijitIconBookmark", tooltip:"这是一棵树" '>
    </div>
    </div>
    　
    　 <div id="mainTabContainer" data-dojo-type="dijit.layout.TabContainer" region="center"
    				data-dojo-props='persist:false, tabStrip:true, style:"width: 400px;height: 400px;"'>

<div id="tab1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"../systemFolder/right.htm", title:"起始页", iconClass:"plusIcon",
    			tooltip:"这是一个起始页"'></div>
    				</div>
    　 
    　　　　　　 <div dojoType="dijit.layout.ContentPane"splitter="false"liveSplitters="true"region="top"style="height: 50px;">
    　 <a href="../logout.do" target="_parent" > 退出系统</a>　
    　 </div>
    　 
    　 </div>

最基本的上左右布局，在左侧预留了一个div，之后会在这个div中去写一棵树，注意需要引入的包文件

<link rel="stylesheet" type="text/css" href="../common/dojo1.9/dojo/resources/dojo.css">
    <link rel="stylesheet" type="text/css" href="../common/dojo1.9/dijit/themes/soria/soria.css">
    <script type="text/javascript" src="../common/dojo1.9/dojo/dojo.js" djConfig="parseOnLoad: true,isDebug: true"></script>

dojo.js一定要在\*.css后面引入。

今天就先写到这吧，新手也得不好，就当学习日记了，哈哈，下一篇博文我将写一下动态树与点击树的节点在div中打开相应页面的方法。

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 Dojo入门：初识Dojo

Dojo的全称是Dojo Toolkit，始创于2004年，是当前各种蓬勃发展的JS工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到

朴灿烈づ我的快乐病毒、/ 2023年08月17日 17:50/ 0 赞/ 119 阅读

相关 dojo小例子（11）grid编辑提交

选中grid某一行编辑，打开一个form表单显示这条记录进行编辑，完成后，表单提交时调用此方法把数据存入后台 function submit(){

痛定思痛。/ 2022年08月25日 12:50/ 0 赞/ 203 阅读

相关 dojo小例子（33）dojo.request.script通过JSONP实现跨域

dojo/request/script通过JSONP实现跨域请求数据，需要后台配合返回Javascript代码： require(["dojo/request/scr

Dear 丶/ 2022年08月04日 15:00/ 0 赞/ 231 阅读

相关初识DOJO（2）DOJO页面布局教程例子

学习dojo，首先都会学习到如何对dojo的页面进行布局。dojo的页面是有很多个div组成的，主要需要引入组件是dijit.layout。 dijit.layout在doj

- 日理万妓/ 2022年04月24日 13:44/ 0 赞/ 288 阅读

相关 dojo 1.6 官方教程：dojo.Deferred 初探

作者: Bryan Forbes 译者: feijia (tiimfei@gmail.com) 原文连接: http://dojotoolkit.org/documenta

秒速五厘米/ 2022年04月17日 20:18/ 0 赞/ 243 阅读

相关 Dojo 1.6 最新官方教程: Hello Dojo!

HelloDojo 作者：SamFoster 译者：ZhuXiaoWen 原文： [http://dojotoolkit.org/documentation/tuto

绝地灬酷狼/ 2022年04月17日 20:09/ 0 赞/ 227 阅读

相关 Dojo 1.6 最新官方教程: Dojo DOM 函数

本文翻译自: [ Dojo DOM Functions ][Dojo DOM Functions] 原作者: Sam Foster 翻译: Siqi （[siqi.zhon

红太狼/ 2022年04月17日 20:06/ 0 赞/ 234 阅读

相关 Dojo 1.6 官方教程：Dojo中的事件

原题：Events with Dojo 原文链接: http://dojotoolkit.org/documentation/tutorials/1.6/events/

谁借莪１个温暖的怀抱￠/ 2022年04月17日 01:25/ 0 赞/ 282 阅读

相关初识DOJO（1）

关于Dojo，我接触的比较晚，我是做web开发的，语言也一直在用Java，后期项目组转型，开始研究GIS，选择的是ArcGIS for javascript ，为什么要提到ar

太过爱你忘了你带给我的痛/ 2022年02月15日 07:11/ 0 赞/ 310 阅读

相关 dojo 六使用query dojo/query

要使用query，就要引入dojo/query包。 query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。 \---------------

爱被打了一巴掌/ 2021年11月10日 07:00/ 0 赞/ 329 阅读