1.0 引用的js,CSS
<linkhref="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"/><linkhref="/Content/scripts/ligerUI/skins/ligerui-icons.css"rel="stylesheet"/><scriptsrc="~/Scripts/jquery-1.8.2.js"></script><scriptsrc="/Content/scripts/ligerUI/js/ligerui.all.js"></script>
2.0 用js代码设置ligerUI布局和Tab高度
<script>vartab;
$(function() {
$("#layout1").ligerLayout({ leftWidth:200, topHeight:80});
$("#accordion1").ligerAccordion({ height:300});//重要的代码,设置新增加的tab的高度等于center div的高度.varheight=$(".l-layout-center").height();
tab=$("#tab1").ligerTab({ height: height });
});//可以动态增加一个tab标签页,但是元素有哪些functionaddTab(url, text, tabid) {
tab.addTabItem({ url: url, text: text, tabid: tabid });
}</script>
3.0 简单的设置样式
<styletype="text/css">body{padding:10px;margin:0;}#layout1{width:100%;margin:40px;height:400px;margin:0;padding:0;}#accordion1{height:270px;}h4{margin:20px;}#accordion1 ul li{font-size:14px;margin-left:15px;}a{color:black;text-decoration:none;}a:hover{color:#ff6a00;}</style>
4.0 body中的内容
<bodystyle="padding:10px"><divid="layout1"><divposition="left"title="功能列表"><divid="accordion1"><divtitle="项目管理"><ul><li><ahref="javascript:void(0)"onclick="addTab( 'http://www.youku.com','指定队伍', 1 )">指定队伍</a></li><li><ahref="Javascript:void(0)"onclick="addTab( 'http://www.jd.com','查看项目', 2 )">查看项目</a></li></ul></div><divtitle="用户管理"><ul><li><ahref="javascript:void(0)"onclick="addTab('http://www.baidu.com','用户审核', 3 )">用户审核</a></li><li><ahref="javascript:void(0)"onclick="addTab( 'http://www.sina.com','查看用户', 4 )">查看用户</a></li></ul></div><divtitle="其他"style="padding:10px">其他内容</div></div></div><divposition="center"id="tab1"></div><divposition="top"style="line-height: 80px;"><spanstyle="font-size: 28px;font-weight: bolder;font-family:楷体;">超级管理员后台</span><span><ahref='@Url.Action("LoginOut","Admin")'style="margin-right: 20px;font-size: 18px;color: #0000cd;float: right;">退出</a></span></div><divposition="bottom"></div></div></body>