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

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

首先我们要去ligerUI官网下载Jquery框架包：http://www.ligerui.com/,官网也有很好的模块例子，童鞋们可以从上面学习很多

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

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title>布局调整</title>

     <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

     <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>

      <!--布局js-->

     <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>

     <script type="text/javascript">

         var navtab = null;

         $(function () {

             //整体布局的初始化

             $("#layout1").ligerLayout({ leftWidth:  });

             //$("#layout1").ligerLayout({ leftWidth: 200, allowRightCollapse: false });//右侧栏目不允许隐藏

             //$("#layout1").ligerLayout({ leftWidth: 200, allowLeftCollapse: false, allowRightCollapse: false }); //左侧栏目固定大小不允许隐藏

             //$("#layout1").ligerLayout({ isLeftCollapse: true }); //右侧初始化隐藏

             //$("#layout1").ligerLayout({ minLeftWidth: 80,minRightWidth: 80 });//左侧栏目最宽80右侧最宽80

         });

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div id="layout1">

         <%--左侧--%>

         <div position="left">

         </div>

         <%--中部--%>

         <div position="center">

         </div>

         <%--右侧--%>

         <div position="right">

         </div>

         <%--顶部--%>

         <div position="top">

         </div>

         <%--底部--%>

         <div position="bottom">

         </div>

     </div>

     </form>

 </body>

 </html>

左侧导航栏目的应用，用ligerUI定义的面板控件代码如下

 //script代码

     <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

     <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>

      <!--布局js-->

     <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>

 <script type="text/javascript">

         var navtab = null;

         $(function () {

             //左侧面板初始化

             $("#accordion1").ligerAccordion({});

         });

     </script>

 //HTML代码

 <div id="accordion1">

                 <div title="功能列表">

                     <ul>

                         <li>列表一</li>

                         <li>列表二</li>

                         <li>列表三</li>

                         <li>列表四</li>

                         <li>列表五</li>

                     </ul>

                 </div>

                 <div title="列表">

                     <ul>

                         <li>列表一</li>

                         <li>列表二</li>

                         <li>列表三</li>

                         <li>列表四</li>

                         <li>列表五</li>

                     </ul>

                 </div>

                 <div title="其他" style="padding: 10px">

                     其他内容

                 </div>

             </div>

在导航中常会用到一些网站栏目信息的录入，这里就可以用到LigerUI里定义的Tree，整理代码如下

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

     <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

     <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

     <style type="text/css">

         .box

         {

             float: left;

         }

         .tree

         {

             width: 230px;

             height: 200px;

             margin: 10px;

             border: 1px solid #ccc;

             overflow: auto;

         }

         h4

         {

             margin: 10px;

         }

     </style>

     <script type="text/javascript">

         var manager=null;

         $(function () {

             $("#tree1").ligerTree({

                 nodeWidth: , //Tree控件宽度

                 data: createData(), //Tree数据源

                 checkbox: true, //是否使用Checkbox

                 idFieldName: 'id', //绑定id

                 isExpand: , //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点

                 slide: false, //节点展开效果False无效果 TRUE缓慢展开效果

                 parentIDFieldName: 'pid'//绑定夫ID

             });

             manager = $("#tree1").ligerGetTreeManager();

         });

         //数据输出

         function createData() {

             var data = [];

             data.push({ id: , pid: , text: '', url: "www.baidu.com",ischecked: true});//设置节点ID 夫ID 节点内容 节点链接 选中状态

             data.push({ id: , pid: , text: '1.1' });

             data.push({ id: , pid: , text: '1.1.2' });

             data.push({ id: , pid: , text: '1.1.2' });

             data.push({ id: , pid: , text: 'wefwfwfe' });

             data.push({ id: , pid: , text: 'wgegwgwg' });

             data.push({ id: , pid: , text: 'gwegwg' });

             data.push({ id: , pid: , text: '1.1.3', ischecked: true });

             data.push({ id: , pid: , text: '1.1.4' });

             data.push({ id: , pid: , text: '1.1.5' });

             data.push({ id: , pid: , text: '1.1.6' });

             data.push({ id: , pid: , text: '', url: "www.baidu.com" });

             data.push({ id: , pid: , text: '', url: "www.baidu.com" });

             return data;

         }

         function getSelected() {

             var note = manager.getSelected(); //获取选中节点的内容 非选中chechbox

             alert('选择的是:' + note.data.url);

         }

         function getChecked() {

             var notes = manager.getChecked(); //获取选中Chechebox内容

             var text = "";

             for (var i = ; i < notes.length; i++) {

                 text += notes[i].data.text + ",";

             }

             alert('选择的节点数：' + text);

         }

         function collapseAll() {

             manager.collapseAll();//全选

         }

         function expandAll() {

             manager.expandAll();//取消全选

         }

     </script>

 </head>

 <body style="padding: 10px">

 <input value="全选" onclick="collapseAll()" type="button" />

 <input value="取消全选" onclick="collapseAll()" type="button" />

 <input value="获取选中内容" onclick="getSelected()" type="button" />

 <input value="获取选中Chechebox内容" onclick="getChecked()" type="button" />

     <div class="box">

         <h4>

             不展开节点</h4>

         <div class="tree">

             <ul id="tree1">

             </ul>

         </div>

     </div>

     <div class="l-clear">

     </div>

 </body>

 </html>

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title>布局调整</title>

     <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

     <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>

      <!--布局js-->

     <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>

     <!--面板js左侧栏目-->

     <script src="lib/ligerUI/js/plugins/ligerAccordion.js" type="text/javascript"></script>

     <!--中部导航js-->

     <script src="lib/ligerUI/js/plugins/ligerTab.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>

     <script src="lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>

     <!--END-->

     <script type="text/javascript">

         var navtab = null;

         $(function () {

             //整体布局的初始化

             $("#layout1").ligerLayout({ leftWidth:  });

             //$("#layout1").ligerLayout({ leftWidth: 200, allowRightCollapse: false });//右侧栏目不允许隐藏

             //$("#layout1").ligerLayout({ leftWidth: 200, allowLeftCollapse: false, allowRightCollapse: false }); //左侧栏目固定大小不允许隐藏

             //$("#layout1").ligerLayout({ isLeftCollapse: true }); //右侧初始化隐藏

             //$("#layout1").ligerLayout({ minLeftWidth: 80,minRightWidth: 80 });//左侧栏目最宽80右侧最宽80

             //左侧面板初始化

             $("#accordion1").ligerAccordion({});

             //中部导航初始化

             $("#framecenter").ligerTab({ showSwitch: true }); //将中部框架改为Tab showSwitch为Tab下拉属性

             navtab = $("#framecenter").ligerGetTabManager();

         });

         //添加Tab标签

         function Add() {

             navtab.addTabItem({

                 text: "百度",//Tab名称

                 url: "Source/index.htm"//Tab链接

             });

         }

     </script>

     <link href="Css/index.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

     <form id="form1" runat="server">

     <div id="layout1">

         <%--左侧--%>

         <div position="left">

             <%--面板代码--%>

             <div id="accordion1">

                 <div title="功能列表">

                     <ul>

                         <li>列表一</li>

                         <li>列表二</li>

                         <li>列表三</li>

                         <li>列表四</li>

                         <li>列表五</li>

                     </ul>

                 </div>

                 <div title="列表">

                     <ul>

                         <li>列表一</li>

                         <li>列表二</li>

                         <li>列表三</li>

                         <li>列表四</li>

                         <li>列表五</li>

                     </ul>

                 </div>

                 <div title="其他" style="padding: 10px">

                     其他内容

                 </div>

             </div>

             <%--面板代码END--%>

         </div>

         <%--中部--%>

         <div position="center" id="framecenter" style=" height:640px;">

             <%--导航代码--%>

                <%-- <div tabid="home" title="我的主页" lselected="true" style="height:300px" >

                    我的主页

                 </div>  --%>

             <%--END导航代码--%>

         </div>

         <%--右侧--%>

         <div position="right">

         </div>

         <%--顶部--%>

         <div position="top">

         <input value="添加菜单" onclick="Add()"  type="button"/>

         </div>

         <%--底部--%>

         <div position="bottom">

         </div>

     </div>

     </form>

 </body>

 </html>

Jquery LigerUI框架学习（一）的更多相关文章

  1. Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能

    LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...

  2. JQuery EasyUI框架学习

    前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...

  3. 请教一个Jquery ligerui 框架的小问题

    关闭子窗体时,要刷新父窗体,百度了很多像使用“window.opener.location.reload();”都不行,和easyui框架是有区别的 在子窗体里写Response.Write(&quo ...

  4. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  5. LigerUi框架+jquery+ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  6. JQuery EasyUI框架

    1. JQuery EasyUI框架概述 1.1. JQuery EasyUI是什么东西 答:JQuery  EasyUI就是一套基础JQuery的富客户端的UI框架.像这些将常用的控件封装成一个UI ...

  7. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  8. jQuery ui 框架

    jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...

  9. Yii框架学习 新手教程（一）

    本人小菜鸟一仅仅,为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...

随机推荐

  1. setcookie 之 我见

    $default_currency=get_default_currency(); $_COOKIE['currency'] = $default_currency['currency']; $_CO ...

  2. web前端开发（4）

    低权重原则,避免滥用子选择器 CSS选择符是有权重的,当不同选择符的样式设置有冲突时会采用权重高的选择符设置的样式. html标签权重是1,class权重是10,id权重是100 如果css选择符权重 ...

  3. jquery插件开发规范

    一.请给你的代码加上注释 这个世界不存在百分百的完美的jquery插件,注释不止是给别人看.更重要的是给自己看. 你应该把注释当做你代码的一部分,养成随手加注释的习惯,尤其是编写javascript的 ...

  4. python编写telnet登陆出现TypeError:'str' does not support the buffer interface

    python3支持byte类型,python2不支持.在python3中,telnet客户端向远程服务器发送的str要转化成byte,从服务器传过来的byte要转换成str,但是在python2不清楚 ...

  5. C#中的virtual & override

    很奇怪的设计,需要靠着两个Keyword共同作用,才能完成多态——而不是类似Java那样的默认多态.所谓共同作用,即基类使用virtual 标示函数,子类使用override显示重写. 有点奇怪,MS ...

  6. codevs3732==洛谷 解方程P2312 解方程

    P2312 解方程 195通过 1.6K提交 题目提供者该用户不存在 标签数论(数学相关)高精2014NOIp提高组 难度提高+/省选- 提交该题 讨论 题解 记录   题目描述 已知多项式方程: a ...

  7. Linux之查看文件大小

    1.查看当前文件大小du -sh ./ du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=< ...

  8. html+css-水平居中-不定款块状元素方法（二）

    来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...

  9. 苹果宣布首批HomeKit智能家居设备将在6月上市

    凤凰科技讯 北京时间5月15日消息,据<华尔街日报>网络版报道,苹果周四宣布,首批支持其HomeKit平台的智能家居设备将在下月上市.这一消息的发布也驳斥了关于该苹果家庭自动化软件平台将推 ...

  10. Datazen 自定义地图--中国地图

    背景: 关于Datazen可以google一下,因为目前Datazen还没有中文版,所以google出来的资料会多一点,由于公司想用Datazen来做报表展示,所以有了下文. 参考文章: 中文---h ...