ligerUI框架是一个很丰富的后台框架模板,具有简洁大方的后台样式框架,还有很多灵活的控件,方便开发人员使用;
把昨天学习的成功拿出来供大家学习学习;
首先我们要去ligerUI官网下载Jquery框架包:http://www.ligerui.com/,官网也有很好的模块例子,童鞋们可以从上面学习很多
我们先从网站的布局来看,ligerui框架根据后台人员应用系统将整体框架分为上中下,
具体应用代码如下,开发人员可以根据自己的需要对框架进行自己的整理和样式更改
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右侧最宽80 19 }); 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>