Layout of the main framework of jQueryMiniUI development Tutorial: OutlookMenu (2)

Layout of the main frame: OutlookMenu reference example: layout of the main frame: OutlookMenu 1: Create an interface Layout & lt ;! -- Layout -- & gt; & lt; divid & quot; layout1 & quot; class & quot; mini-layout & quot; style & quot; width: 100%; height: 100%; & q

Layout of the main framework: OutlookMenu

Reference example: layout of the main frame: OutlookMenu

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 OutlookMenu

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

IdField = "id" parentField = "pid" textField = "text">
The JSON format returned by the url from the server is as follows:
[
{Id: "user", text: "user management "},
{Id: "addUser", pid: "user", text: "add user", iconCls: "icon-add", url: "../navbartree/navbartree.html "},
{Id: "editUser", pid: "user", text: "Modify user", iconCls: "icon-edit", url: "../buttonedit/openmediaworkflow html "},
{Id: "removeUser", pid: "user", text: "delete user", iconCls: "icon-remove", url: "../datagrid/datagrid.html "},

{Id: "right", text: "permission management "},
{Id: "addRight", pid: "right", text: "query permission", iconCls: "Note", url :".. /navbartree/navbartree.html ", iconPosition:" top "},
{Id: "editRight", pid: "right", text: "Operation permission", iconCls: "Reports", url :".. /buttonedit/openmediaworkflow html ", iconPosition:" top "}
]
The tree structure is composed of "id" and "pid". When creating OutlookMenu, set "idField" and "parentField ".

3. Create an IFrame

Add an IFrame element to the right of the Splitter as the main operation area.


4. Listening for handling "itemselect" Events

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

Function onItemSelect (e ){
Var item = e. item;
Iframe. src = item. url;