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. 转载:Character data is represented incorrectly when the code page of the client computer differs from the code page of the database in SQL Server 2005

    https://support.microsoft.com/en-us/kb/904803 Character data is represented incorrectly when the cod ...

  2. jQuery中json对象的复制(数组及对象) .

    1.jQuery自带的$.map方式: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢 ...

  3. 利用dex2jar反编译apk

    下载工具dex2jar和jd-gui ,解压 将要反编译的APK后缀名改为.rar或则 .zip,并解压,得到其中的额classes.dex文件(它就是java文件编译再通过dx工具打包而成的) 将获 ...

  4. 剑指Offer07 斐波那契数列

    /************************************************************************* > File Name: 07_Fibona ...

  5. hdu 4010 Query on The Trees LCT

    支持:1.添加边 x,y2.删边 x,y3.对于路径x,y上的所有节点的值加上w4.询问路径x,y上的所有节点的最大权值 分析:裸的lct...rev忘了清零死循环了两小时... 1:就是link操作 ...

  6. macOS10.12允许所有来源设置

    如何调出允许所有来源呢? 很简单一行命令搞定 调出允许所有来源 1.打开终端执行命令 sudo spctl --master-disable 2.你在打开偏好设置--> 安全与隐私   好了赶快 ...

  7. curl模拟浏览器进行phpQuery抓取数据

    报Warning: file_get_contents(http://www.dianping.com/shop/8042874) [function.file-get-contents]: fail ...

  8. 【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

    摘要:本文记录创建一个小的.简单的产品网站的步骤. 一,搭建一个简单的产品展示网站,熟悉以下知识点:NVelocity模板引擎.Ajax无刷新页面请求,文件上传,Row_Number实现分页,ckEd ...

  9. js实现遮罩以及弹出可移动登录窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. C#_字符串的操作

    1: using System; 2: using System.Collections.Generic; 3: using System.Linq; 4: using System.Text; 5: ...