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>
View Code

相关文章:

  • 2021-09-04
  • 2022-12-23
  • 2021-11-21
  • 2021-11-04
  • 2022-12-23
  • 2022-02-08
猜你喜欢
  • 2022-12-23
  • 2021-12-18
  • 2021-11-23
  • 2022-12-23
  • 2021-09-16
  • 2021-10-15
相关资源
相似解决方案