鍙傝冪ず渚?/span>錛?a target="_blank">Pager錛氬垎欏墊帶浠?/a>
<div class="mini-pager" style="width:600px;background:#ccc;" totalCount="123" onpagechanged="onPageChanged" sizeList="[5,10,20,100]" showTotalCount="true" > </div> <script type="text/javascript"> function onPageChanged(e) { alert(e.pageIndex+":"+e.pageSize); } </script>
鍙傝冪ず渚?/span>錛?a target="_blank">OutlookTree錛氭姌鍙犳爲(wèi)
<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect" textField="text" idField="id" parentField="pid"> </div>
[ {id: "user", text: "鐢ㄦ埛綆$悊"}, {id: "lists", text: "Lists", pid: "user" }, {id: "datagrid", text: "DataGrid", pid: "lists"}, {id: "tree", text: "Tree" , pid: "lists"}, {id: "treegrid", text: "TreeGrid " , pid: "lists"}, {id: "layouts", text: "Layouts", expanded: false, pid: "user"}, {id: "panel", text: "Panel", pid: "layouts"}, {id: "splitter", text: "Splitter", pid: "layouts"}, {id: "layout", text: "Layout ", pid: "layouts"}, { id: "right", text: "鏉冮檺綆$悊"}, {id: "base", text: "Base", expanded: false, pid: "right" }, {id: "ajax", text: "Ajax", pid: "base"}, {id: "json", text: "JSON", pid: "base"}, {id: "date", text: "Date", pid: "base"}, {id: "forms", text: "Forms", expanded: false, pid: "right"}, {id: "button", text: "Button", pid: "forms"}, {id: "listbox", text: "ListBox", pid: "forms"}, {id: "checkboxlist", text: "CheckBoxList", pid: "forms"}, {id: "radiolist", text: "RadioList", pid: "forms"}, {id: "calendar", text: "Calendar", pid: "forms"} ]
鍙傝冪ず渚?/span>錛?a target="_blank">OutlookMenu錛氭姌鍙犺彍鍗?/a>
<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect" idField="id" parentField="pid" textField="text"> </div>
[ { id: "user", text: "鐢ㄦ埛綆$悊"}, { id: "addUser", pid: "user", text: "澧炲姞鐢ㄦ埛", iconCls: "icon-add", url: "../navbartree/navbartree.html" }, { id: "editUser", pid: "user", text: "淇敼鐢ㄦ埛", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" }, { id: "removeUser", pid: "user", text: "鍒犻櫎鐢ㄦ埛", iconCls: "icon-remove", url: "../datagrid/datagrid.html" }, { id: "right", text: "鏉冮檺綆$悊"}, { id: "addRight", pid: "right", text: "鏌ヨ鏉冮檺", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" }, { id: "editRight", pid: "right", text: "鎿嶄綔鏉冮檺", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" } ]
鏅姞鐢樼壒鍥?/a>鏄疻EB鐢樼壒鍥鵑閫夎В鍐蟲柟妗堛傞傜敤浜庢瀯寤洪」鐩鐞嗐佺敓浜ф帓紼嬬瓑榪涘害璁″垝綆$悊杞歡銆傛敮鎸佷換鎰忓紑鍙戝鉤鍙板拰鏁版嵁搴撱傚畠鏄疛avaScript寮鍙戠殑錛屾棤闇瀹夎鎻掍歡錛岃法嫻忚鍣ㄨ繍琛屻?/p> 鍩烘湰鐗規(guī)?/span>錛?/span> 鏁堟灉鍥撅細(xì) 鏍稿績鍔熻兘錛?/span> 鍔熻兘紺轟緥錛?/strong>
鐢樼壒鍥炬晥鏋滄埅鍥懼涓嬶細(xì)
鎺掔▼鐢樼壒鍥撅細(xì) 宸︿晶琛ㄦ牸鍖猴紝鍗曞厓鏍煎彸涓婅綰㈣壊涓夎鍧楋紝琛ㄧず琚慨鏀廣?/span>
璺熻釜鐢樼壒鍥?/a>錛氬疄鐜板疄闄呬笌璁″垝鏃ユ湡鐨勫姣斻?/span>
鍏抽敭璺緞鐢樼壒鍥撅細(xì)鍏抽敭璺緞鐨勫伐鏈熷喅瀹氫簡鏁翠釜欏圭洰鐨勫伐鏈熴?/span>
浠誨姟闈㈡澘
欏圭洰鏃ュ巻闈㈡澘
澶氬浗璇█鏈湴鍖?/span>
]]>
鍙傝冪ず渚?/span>錛?a target="_blank">OutlookBar錛氭姌鍙犻潰鏉跨粍
<div id="outlookbar1" class="mini-outlookbar " activeIndex="0" style="width:180px;height:250px;" autoCollapse="true"> <div title="鏉冮檺綆$悊"> 1 </div> <div title="鐢ㄦ埛綆$悊"> 2 </div> </div>
鍙傝冪ず渚?/span>錛?a target="_blank">Tabs錛氭噿鍔犺澆欏甸潰
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" showTreeIcon="true" textField="text" idField="id" > </ul>
閫氳繃url榪斿洖鐨勬暟鎹粨鏋勫涓嬶細(xì)
[ {title: "Tab1", url: "../tabs/pages/page1.html", refreshOnClick: true}, {title: "Tab2", url: "../tabs/pages/page2.html", showCloseButton: true}, {title: "Tab3", url: "../tabs/pages/page3.html"}, {title: "Tab4", url: "../tabs/pages/page4.html"}, {title: "Tab5", url: "../tabs/pages/page5.html"} ]
鍙傝冪ず渚?/span>錛?a target="_blank">Tabs錛氶夐」鍗?/a>
鍏朵腑錛屽瓙tab鍏鋒湁濡備笅灞炴э細(xì)
Name | Type | Description | Default |
---|---|---|---|
name | String | 闈㈡澘鍚嶇О | |
title | String | 鏍囬鏂囨湰 | |
newLine | Boolean | 鏄惁鎹㈣ | false |
iconCls | String | 鏍囬鍥炬爣鏍峰紡綾?/td> | |
iconStyle | String | 鏍囬鍥炬爣鏍峰紡 | |
headerCls | String | 澶撮儴鏍峰紡綾?/td> | |
headerStyle | String | 澶撮儴鏍峰紡 | |
bodyCls | String | 鍐呭鍖烘牱寮忕被 | |
bodyStyle | String | 鍐呭鍖烘牱寮?/td> | |
visible | Boolean | 鏄惁鏄劇ず | true |
enabled | Boolean | 鏄惁鍚敤 | true |
showCloseButton | Boolean | 鏄惁鏄劇ず鍏抽棴鎸夐挳 | true |
url | String | 璺緞鍦板潃 | |
onload | Function | 鍔犺澆鎴愬姛鏃舵縺鍙?/td> | |
ondestroy | Function | 閿姣佹椂嬋鍙?/td> | |
removeAction | String | tab鐨処Frame閿姣佹椂鐨勫姩浣滐紝姣斿"close","cancel","ok"銆?/td> |
鍙傝冪ず渚?/span>錛?a target="_blank">ContextMenu錛氬彸閿彍鍗?/a>
<ul id="contextMenu" class="mini-contextmenu" > <li> <span >鎿嶄綔</span> <ul> <li iconCls="icon-new" onclick="onItemClick">鏂板緩</li> <li class="separator"></li> <li iconCls="icon-add" onclick="onItemClick">澧炲姞</li> <li iconCls="icon-edit" onclick="onItemClick">淇敼</li> <li iconCls="icon-remove" onclick="onItemClick">鍒犻櫎</li> </ul> </li> <li class="separator"></li> <li iconCls="icon-open" >鎵撳紑</li> <li iconCls="icon-remove" >鍏抽棴</li> </ul>
function onItemClick(e) { var item = e.sender; alert(item.getText()); } window.onload = function () { $("#region1").bind("contextmenu", function (e) { var menu = mini.get("contextMenu"); menu.showAtPos(e.pageX, e.pageY); return false; }); }
<ul id="menu2" class="mini-menubar" style="width:100%;"> <li> <span >鏂囦歡(F)</span> <ul> <li onclick="onItemClick"> <span >鏂板緩</span> <ul> <li iconCls="icon-new" onclick="onItemClick">鏂囦歡</li> <li onclick="onItemClick">欏圭洰</li> <li onclick="onItemClick">緗戠珯</li> </ul> </li> <li class="separator"></li> <li iconCls="icon-cut" onclick="onItemClick">Cut</li> <li iconCls="icon-add" onclick="onItemClick">Add</li> <li iconCls="icon-remove" onclick="onItemClick">Close</li> </ul> </li> <li class="separator"></li> <li >緙栬緫(E)</li> <li onclick="onItemClick">鏌ョ湅(V)</li> <li iconCls="icon-help" onclick="onItemClick">甯姪(H)</li> </ul>