美高梅网投网站-美高梅手机网投-美高梅官方网站
做最好的网站

您的位置:美高梅网投网址 > 美高梅网站 > 美高梅网投网站:开荒人士能够依据自个儿的内

美高梅网投网站:开荒人士能够依据自个儿的内

发布时间:2019-09-29 06:17编辑:美高梅网站浏览(68)

    ligerUI框架是一个很丰富的后台框架模板,具有简洁大方的后台样式框架,还有很多灵活的控件,方便开发人员使用;

    把昨天学习的成功拿出来供大家学习学习;

    首先我们要去ligerUI官网下载Jquery框架包:

    我们先从网站的布局来看,ligerui框架根据后台人员应用系统将整体框架分为上中下,

    美高梅网投网站,具体应用代码如下,开发人员可以根据自己的需要对框架进行自己的整理和样式更改

    美高梅手机网投 1美高梅手机网投 2

     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定义的面板控件代码如下

    美高梅手机网投 3美高梅手机网投 4

     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,整理代码如下

    美高梅手机网投 5美高梅手机网投 6

      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>
    

    View Code

    后台框架不可缺失的显示录入内容的模块,LigerUI中的Tab控件,我们可以直接将Tab控件于框架结合,整理代码如下

    美高梅手机网投 7美高梅手机网投 8

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

    View Code

    本文由美高梅网投网址发布于美高梅网站,转载请注明出处:美高梅网投网站:开荒人士能够依据自个儿的内

    关键词: