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

大佬教程收集整理的这篇文章主要介绍了初识DOJO（2）DOJO页面布局教程例子，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

• 首先是@L_197_0@布局

<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中打开相应@L_197_0@的方法。

大佬总结

以上是大佬教程为你收集整理的初识DOJO（2）DOJO页面布局教程例子全部内容，希望文章能够帮你解决初识DOJO（2）DOJO页面布局教程例子所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。