ligerUI框架是一個很豐富的后台框架模板，具有簡潔大方的后台樣式框架，還有很多靈活的控件，方便開發人員使用；
把昨天學習的成功拿出來供大家學習學習；
首先我們要去ligerUI官網下載Jquery框架包：http://www.ligerui.com/,官網也有很好的模塊例子，童鞋們可以從上面學習很多
我們先從網站的布局來看，ligerui框架根據后台人員應用系統將整體框架分為上中下，
具體應用代碼如下，開發人員可以根據自己的需要對框架進行自己的整理和樣式更改
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title>布局調整</title> 4 <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 5 <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 6 <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script> 7 8 <!--布局js--> 9 <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 var navtab = null; 12 $(function () { 13 //整體布局的初始化 14 $("#layout1").ligerLayout({ leftWidth: 200 }); 15 //$("#layout1").ligerLayout({ leftWidth: 200, allowRightCollapse: false });//右側欄目不允許隱藏 16 //$("#layout1").ligerLayout({ leftWidth: 200, allowLeftCollapse: false, allowRightCollapse: false }); //左側欄目固定大小不允許隱藏 17 //$("#layout1").ligerLayout({ isLeftCollapse: true }); //右側初始化隱藏 18 //$("#layout1").ligerLayout({ minLeftWidth: 80,minRightWidth: 80 });//左側欄目最寬80右側最寬80 19 }); 20 </script> 21 22 </head> 23 <body> 24 <form id="form1" runat="server"> 25 <div id="layout1"> 26 <%--左側--%> 27 <div position="left"> 28 </div> 29 <%--中部--%> 30 <div position="center"> 31 </div> 32 <%--右側--%> 33 <div position="right"> 34 </div> 35 <%--頂部--%> 36 <div position="top"> 37 </div> 38 <%--底部--%> 39 <div position="bottom"> 40 </div> 41 </div> 42 </form> 43 </body> 44 </html>
左側導航欄目的應用，用ligerUI定義的面板控件代碼如下
1 //script代碼 2 <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 3 <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 4 <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script> 5 6 <!--布局js--> 7 <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 var navtab = null; 10 $(function () { 11 12 //左側面板初始化 13 $("#accordion1").ligerAccordion({}); 14 15 }); 16 17 </script> 18 //HTML代碼 19 <div id="accordion1"> 20 <div title="功能列表"> 21 <ul> 22 <li>列表一</li> 23 <li>列表二</li> 24 <li>列表三</li> 25 <li>列表四</li> 26 <li>列表五</li> 27 </ul> 28 </div> 29 <div title="列表"> 30 <ul> 31 <li>列表一</li> 32 <li>列表二</li> 33 <li>列表三</li> 34 <li>列表四</li> 35 <li>列表五</li> 36 </ul> 37 </div> 38 <div title="其他" style="padding: 10px"> 39 其他內容 40 </div> 41 </div>
在導航中常會用到一些網站欄目信息的錄入，這里就可以用到LigerUI里定義的Tree，整理代碼如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 5 <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 6 <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script> 7 <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> 8 <style type="text/css"> 9 .box 10 { 11 float: left; 12 } 13 .tree 14 { 15 width: 230px; 16 height: 200px; 17 margin: 10px; 18 border: 1px solid #ccc; 19 overflow: auto; 20 } 21 h4 22 { 23 margin: 10px; 24 } 25 </style> 26 <script type="text/javascript"> 27 28 var manager=null; 29 $(function () { 30 31 $("#tree1").ligerTree({ 32 nodeWidth: 200, //Tree控件寬度 33 data: createData(), //Tree數據源 34 checkbox: true, //是否使用Checkbox 35 idFieldName: 'id', //綁定id 36 isExpand: 2, //是否展開節點 FALSE為不展開 TRUE展示所有節點 指定數字為展開指定節點 37 slide: false, //節點展開效果False無效果 TRUE緩慢展開效果 38 parentIDFieldName: 'pid'//綁定夫ID 39 }); 40 manager = $("#tree1").ligerGetTreeManager(); 41 42 }); 43 44 //數據輸出 45 function createData() { 46 var data = []; 47 48 data.push({ id: 1, pid: 0, text: '1', url: "www.baidu.com",ischecked: true});//設置節點ID 夫ID 節點內容 節點鏈接 選中狀態 49 data.push({ id: 2, pid: 1, text: '1.1' }); 50 data.push({ id: 4, pid: 2, text: '1.1.2' }); 51 data.push({ id: 5, pid: 2, text: '1.1.2' }); 52 53 data.push({ id: 10, pid: 8, text: 'wefwfwfe' }); 54 data.push({ id: 11, pid: 8, text: 'wgegwgwg' }); 55 data.push({ id: 12, pid: 8, text: 'gwegwg' }); 56 57 data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true }); 58 data.push({ id: 7, pid: 2, text: '1.1.4' }); 59 data.push({ id: 8, pid: 7, text: '1.1.5' }); 60 data.push({ id: 9, pid: 7, text: '1.1.6' }); 61 62 data.push({ id: 20, pid: 0, text: '1', url: "www.baidu.com" }); 63 data.push({ id: 21, pid: 20, text: '12', url: "www.baidu.com" }); 64 return data; 65 } 66 function getSelected() { 67 var note = manager.getSelected(); //獲取選中節點的內容 非選中chechbox 68 alert('選擇的是:' + note.data.url); 69 } 70 71 function getChecked() { 72 var notes = manager.getChecked(); //獲取選中Chechebox內容 73 var text = ""; 74 for (var i = 0; i < notes.length; i++) { 75 76 text += notes[i].data.text + ","; 77 } 78 alert('選擇的節點數：' + text); 79 } 80 function collapseAll() { 81 manager.collapseAll();//全選 82 } 83 function expandAll() { 84 manager.expandAll();//取消全選 85 } 86 </script> 87 </head> 88 <body style="padding: 10px"> 89 <input value="全選" onclick="collapseAll()" type="button" /> 90 <input value="取消全選" onclick="collapseAll()" type="button" /> 91 <input value="獲取選中內容" onclick="getSelected()" type="button" /> 92 <input value="獲取選中Chechebox內容" onclick="getChecked()" type="button" /> 93 94 <div class="box"> 95 <h4> 96 不展開節點</h4> 97 <div class="tree"> 98 <ul id="tree1"> 99 </ul> 100 </div> 101 </div> 102 <div class="l-clear"> 103 </div> 104 </body> 105 </html>
后台框架不可缺失的顯示錄入內容的模塊，LigerUI中的Tab控件，我們可以直接將Tab控件於框架結合，整理代碼如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title>布局調整</title> 4 <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 5 <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 6 <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script> 7 8 <!--布局js--> 9 <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script> 10 <!--面板js左側欄目--> 11 <script src="lib/ligerUI/js/plugins/ligerAccordion.js" type="text/javascript"></script> 12 <!--中部導航js--> 13 <script src="lib/ligerUI/js/plugins/ligerTab.js" type="text/javascript"></script> 14 <script src="lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script> 15 <script src="lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script> 16 <!--END--> 17 18 19 <script type="text/javascript"> 20 var navtab = null; 21 $(function () { 22 //整體布局的初始化 23 $("#layout1").ligerLayout({ leftWidth: 200 }); 24 //$("#layout1").ligerLayout({ leftWidth: 200, allowRightCollapse: false });//右側欄目不允許隱藏 25 //$("#layout1").ligerLayout({ leftWidth: 200, allowLeftCollapse: false, allowRightCollapse: false }); //左側欄目固定大小不允許隱藏 26 //$("#layout1").ligerLayout({ isLeftCollapse: true }); //右側初始化隱藏 27 //$("#layout1").ligerLayout({ minLeftWidth: 80,minRightWidth: 80 });//左側欄目最寬80右側最寬80 28 29 //左側面板初始化 30 $("#accordion1").ligerAccordion({}); 31 //中部導航初始化 32 $("#framecenter").ligerTab({ showSwitch: true }); //將中部框架改為Tab showSwitch為Tab下拉屬性 33 navtab = $("#framecenter").ligerGetTabManager(); 34 }); 35 36 //添加Tab標簽 37 function Add() { 38 navtab.addTabItem({ 39 text: "百度",//Tab名稱 40 url: "Source/index.htm"//Tab鏈接 41 }); 42 } 43 </script> 44 <link href="Css/index.css" rel="stylesheet" type="text/css" /> 45 </head> 46 <body> 47 <form id="form1" runat="server"> 48 <div id="layout1"> 49 <%--左側--%> 50 <div position="left"> 51 <%--面板代碼--%> 52 <div id="accordion1"> 53 <div title="功能列表"> 54 <ul> 55 <li>列表一</li> 56 <li>列表二</li> 57 <li>列表三</li> 58 <li>列表四</li> 59 <li>列表五</li> 60 </ul> 61 </div> 62 <div title="列表"> 63 <ul> 64 <li>列表一</li> 65 <li>列表二</li> 66 <li>列表三</li> 67 <li>列表四</li> 68 <li>列表五</li> 69 </ul> 70 </div> 71 <div title="其他" style="padding: 10px"> 72 其他內容 73 </div> 74 </div> 75 <%--面板代碼END--%> 76 </div> 77 <%--中部--%> 78 <div position="center" id="framecenter" style=" height:640px;"> 79 <%--導航代碼--%> 80 <%-- <div tabid="home" title="我的主頁" lselected="true" style="height:300px" > 81 我的主頁 82 </div> --%> 83 <%--END導航代碼--%> 84 </div> 85 <%--右側--%> 86 <div position="right"> 87 </div> 88 <%--頂部--%> 89 <div position="top"> 90 <input value="添加菜單" onclick="Add()" type="button"/> 91 </div> 92 <%--底部--%> 93 <div position="bottom"> 94 </div> 95 </div> 96 </form> 97 </body> 98 </html>