jQuery MiniUI 开发教程 主框架布局之：OutlookMenu（二）

主框架布局之：OutlookMenu
[img]http://www.miniui.com/docs/api/images/layout_outlookmenu.gif[/img]

参考示例：[url=http://www.miniui.com/demo/outlookmenu/outlookmenu.html]主框架布局之：OutlookMenu[/url]

[b]一：创建界面布局[/b]

<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="70" showSplit="false" showHeader="false">
</div>
<div title="south" region="south" showSplit="false" showHeader="false" height="30" >
</div>
<div title="center" region="center" bodyStyle="overflow:hidden;">
<!--Splitter-->
<div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
<div size="180" maxSize="250" minSize="100" showCollapseButton="true">

</div>
<div showCollapseButton="false">

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

[b]二：创建OutlookMenu[/b]
创建OutlookMenu控件，放入Splitter左侧区域，作为功能操作树。
<!--OutlookMenu-->
<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
idField="id" parentField="pid" textField="text">
</div>
url从服务端返回JSON格式如下：
[
{ id: "user", text: "用户管理"},
{ id: "addUser", pid: "user", text: "增加用户", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
{ id: "editUser", pid: "user", text: "修改用户", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
{ id: "removeUser", pid: "user", text: "删除用户", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },

{ id: "right", text: "权限管理"},
{ id: "addRight", pid: "right", text: "查询权限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
{ id: "editRight", pid: "right", text: "操作权限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }
]
通过 "id" 和 "pid" 组成树形结构，在创建OutlookMenu时注意设置 "idField" 和 "parentField" 。

[b]三：创建IFrame[/b]
在Splitter右侧区域加入一个IFrame元素，作为主操作区域。
<iframe id="mainframe" frameborder="0" name="main" style="width:100%;height:100%;" border="0"></iframe>

[b]四：监听处理"itemselect"事件[/b]

var iframe = document.getElementById("mainframe");
iframe.src = "../datagrid/datagrid.html#1"

function onItemSelect(e) {
var item = e.item;
iframe.src = item.url;
}