您的位置：首页 > Web前端 > JQuery

Jquery LigerUI框架学习（一）

2014-08-26 17:52 369 查看

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>
<!--面板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: 200 });
//$("#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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航