·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> Jquery LigerUI框架学习（一）

【如有意向点此提交需求】关于我们

Jquery LigerUI框架学习（一）

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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右侧最宽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