初识DOJO(2)DOJO页面布局教程例子
发布时间:2020-12-16 21:36:47 所属栏目:百科 来源:网络整理
导读:学习dojo,首先都会学习到如何对dojo的页面进行布局。dojo的页面是有很多个div组成的,主要需要引入组件是dijit.layout。 dijit.layout在dojo的在线API中有十分详细的介绍,国内网站上也能搜索到大量的布局教程,但是大多都是针对dojo1.6或1.7版本的,我接触
学习dojo,首先都会学习到如何对dojo的页面进行布局。dojo的页面是有很多个div组成的,主要需要引入组件是dijit.layout。 dijit.layout在dojo的在线API中有十分详细的介绍,国内网站上也能搜索到大量的布局教程,但是大多都是针对dojo1.6或1.7版本的,我接触dojo的时候是1.8,在我写这篇博文的时候dojo在官网已经推出1.9这个兼容IE10的版本了,建议大家(只是建议)用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中打开相应页面的方法。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |