Jquery LigerUI框架学习（一）
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>