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

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

主框架布局之：OutlookMenu

           
           

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

           

一：创建界面布局

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

二：创建OutlookMenu

创建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" 。
         

三：创建IFrame

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

                      

四：监听处理"itemselect"事件

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

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