The layout of the main framework of the jQuery MiniUI development Tutorial: Menu

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 Menu

Create a Menu Control and place it in the top area as a function operation item.

<Ul id = "menu1" class = "mini-menubar" style = "width: 100% ;"
Url = "../data/listTree.txt" onitemclick = "onItemClick"
TextField = "text" idField = "id" parentField = "pid">
</Ul>
The JSON format returned by the url from the server is as follows:
[
{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 "},
......
]
The "id" and "pid" are used to form a Tree structure. When creating a Tree, set the "idField" and "parentField" attributes.

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 "itemclick" 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 onItemClick (e ){
Var item = e. item;
Var isLeaf = e. isLeaf;
If (isLeaf ){
ShowTab (item );
}