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
新闻热点
疑难解答
