JQuery MiniUI Quick Start: main framework layout (5)

The following shows a typical main framework layout.
As follows:

I. Create an interface Layout

<! -- 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 implements the upper, middle, and lower la s; Splitter implements the Left and Right folding la S.
Ii. Create an OutlookTree

Create the OutlookTree control and place it in the left area of the Splitter as the function operation tree.

<! -- OutlookTree -->
<Div id = "leftTree" class = "mini-outlooktree" url = "../data/outlooktree.txt" onnodeselect = "onNodeSelect"
TextField = "text" idField = "id" parentField = "pid">
</Div>
The JSON format returned by the url from the server is as follows:

[
{Id: "user", text: "user management "},
{Id: "lists", text: "Lists", pid: "user "},
{Id: "datagrid", text: "DataGrid", pid: "lists "},
{Id: "tree", text: "Tree", pid: "lists "},
......
]
The "id" and "pid" are used to form a tree structure. When creating an OutlookTree, pay attention to setting "idField" and "parentField ".
3. Create Tabs

Create a Tabs control and place it in the area on the right of the Splitter as the main operation area.

<! -- Tabs -->
<Div id = "mainTabs" class = "mini-tabs bg-toolbar" activeIndex = "0" style = "width: 100%; height: 100% ;"
BodyStyle = "border: 0; background: white ;"
>
<Div title = "Homepage" url = ".../docs/api/overview.html">
</Div>
</Div>
4. Listening for handling "nodeselect" Events

Function showTab (node ){
Var tabs = mini. get ("mainTabs ");
Var id = "tab $" + node. id;
Var tab = 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 );
}

Function onNodeSelect (e ){
Var node = e. node;
Var isLeaf = e. isLeaf;

If (isLeaf ){
ShowTab (node );
}
}