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