jQuery MiniUI 开发教程 主框架布局之：Menu（四）

主框架布局之：Menu

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

一：创建界面布局

<!--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实现左、右折叠布局。

二：创建Menu

创建Menu控件，放入顶部区域，作为功能操作项。

<ulid="menu1"class="mini-menubar"style="width:100%;"

url="../data/listTree.txt"onitemclick="onItemClick"

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

</ul>

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

[

{id:"base",text:"Base",expanded:false},

{id:"ajax",text:"Ajax",pid:"base"},

{id:"json",text:"JSON",pid:"base"},

{id:"date",text:"Date",pid:"base"},

{id:"control",text:"Control",pid:"base"},

......

]

通过"id"和"pid"组成树形结构，在创Tree时注意设置"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>

四：监听处理"itemclick"事件

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);

}

functiononItemClick(e){

varitem=e.item;

varisLeaf=e.isLeaf;

if(isLeaf){

showTab(item);

}

}