jQuery MiniUI 开发教程 主框架布局之：OutlookTree（一）

主框架布局之：OutlookTree

参考示例：主框架布局之：OutlookTree

一：创建界面布局

<!--Layout-->

<divid="layout1"class="mini-layout"style="width:100%;height:100%;">

<divclass="header"region="north"height="70"showSplit="false"showHeader="false">

</div>

<divtitle="south"region="south"showSplit="false"showHeader="false"height="30">

</div>

<divtitle="center"region="center"bodystyle="overflow:hidden;">

<!--Splitter-->

<divclass="mini-splitter"style="width:100%;height:100%;"borderstyle="border:0;">

<divsize="180"maxSize="250"minSize="100"showCollapseButton="true">

</div>

<divshowCollapseButton="false">

</div>

</div>

</div>

</div>

其中，Layout实现上、中、下布局；Splitter实现左、右折叠布局。

二：创建OutlookTree

创建OutlookTree控件，放入Splitter左侧区域，作为功能操作树。

<!--OutlookTree-->

<divid="leftTree"class="mini-outlooktree"url="../data/outlooktree.txt"onnodeselect="onNodeSelect"

textField="text"idField="id"parentField="pid">

</div>

url从服务端返回JSON格式如下：

[

{id:"user",text:"用户管理"},

{id:"lists",text:"Lists",pid:"user"},

{id:"datagrid",text:"DataGrid",pid:"lists"},

{id:"tree",text:"Tree",pid:"lists"},

......

]

通过"id"和"pid"组成树形结构，在创建OutlookTree时注意设置"idField"和"parentField"。

三：创建Tabs

创建Tabs控件，放入Splitter右侧区域，作为主操作区域。

<!--Tabs-->

<divid="mainTabs"class="mini-tabsbg-toolbar"activeIndex="0"style="width:100%;height:100%;"

bodystyle="border:0;background:white;"

>

<divtitle="首页"url="../../docs/api/overview.html">

</div>

</div>

四：监听处理"nodeselect"事件

functionshowTab(node){

vartabs=mini.get("mainTabs");

varid="tab$"+node.id;

vartab=tabs.getTab(id);

if(!tab){

tab={};

tab.name=id;

tab.title=node.text;

tab.showCloseButton=true;

tab.url=node.url;

tabs.addTab(tab);

}

tabs.activeTab(tab);

}

functiononNodeSelect(e){

varnode=e.node;

varisLeaf=e.isLeaf;

if(isLeaf){

showTab(node);

}

}