Dojo布局(重点主面板调用新页面)

  之前dojo布局简单的达到iframe的效果是很容易的,但是在主显示面板调用另一页面时遇到问题,现简单介绍下:

  先贴出布局代码吧

 1 <body class="claro">
 2     <div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true" id="borderContainer" style="width: 100%; height: 100%;"> 
 3         <div dojoType="dijit.layout.ContentPane" splitter="false" region="top" style="height:100px"> 
 4              Top
 5          </div> 
 6         <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"style="width:230px;height:auto"> 
 7             <div dojoType="dojox.layout.ScrollPane" style="float:left; padding-right:12px;width:auto;height:480px;"orientation="vertical" id="vert"> 
 8                 <div dojoType="dijit.TitlePane" title="权限管理" style="width:200px;height:100%;">
 9                     <!-- 菜单栏,自动加载 -->
10                     <div id="menuTree"></div>
11                 </div>
12             </div> 
13          </div> 
14          <div dojoType="dojox.layout.ContentPane" splitter="true" region="center" style="width:100%; height:200px;">
15              <div id="lhtabs" dojoType="dijit.layout.TabContainer" style="margin-top:-10px;">
16                 <div dojoType="dojox.layout.ContentPane" id="test1" data-dojo-props='title:"首页", closable:true'></div>    
17             </div>
18         </div> 
19     </div>
20 </body>

整体布局是用dijit.layout.BorderContainer控制的   BorderContainer能轻易的达到iframe那种上下左右中的布局,这个资料很多,不详说;

菜单栏是用dojox.layout.ScrollPane来实现的,它下面可以有多个dijit.TitlePane,然后还有一些动画效果,下章细说;

最后就是主面板了:dojox.layout.ContentPane;为什么要用dojox.layout.ContentPane啦,而不用dijit.layout.ContentPane?

  这就是面板加载新页面的问题了,如果用dijit.layout.ContentPane,那么加载新页面时是不会加载页面的<script></script>中的代码的(在无js的静态页面中使用方便),而dojox.layout.ContentPane是在dijit.layout.ContentPane的基础上的扩展类,且能加载新页面中的js代码;

然后这里要注意的重要的一点是:dojo加载新页面是采用的ajax模式,即将新页面中的代码融合到主页面中,所以千万千万不要在新页面中再次加载dojo.js和djConfig="isDebug:true";

加载方式:获取ContentPane控件,然后set路径url;

dojo.ready(function(){
            var test1 = dijit.byId("test1");
            test1.set("href","test.html");
            
            loadMeun("meunTreeDate.json");     //加载菜单
        });

上面就是加载的一个test页面,如果是正式项目时可以设置为首页地址;

在菜单调用页面的时候,加载的页面也是可以做成可配动态的;

最后看下截图效果:

Dojo布局(重点主面板调用新页面)_第1张图片

 

好了  面板布局暂时就说这么点吧;

你可能感兴趣的:(dojo)