JQueryMiniUI Quick Start: main framework layout (5)

The following shows a typical main framework layout. 1. Create an interface Layout & lt ;! -- Layout -- & gt; & lt; divid & quot; layout1 & quot; class & quot; mini-layout & quot; style & quot; width: 100%; height: 100%; & quot; & gt; & lt; divclass

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

I. Create an interface Layout

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.

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

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.

BodyStyle = "border: 0; background: white ;"
>



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