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右側最寬8019 });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>View Code
左側導航欄目的應用，用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>View Code在導航中常會用到一些網站欄目信息的錄入，這里就可以用到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 colla
新聞熱點
疑難解答
