jQuery布局

转载地址：http://idream.iteye.com/blog/770887

 

是这样的，开始准备做一个美观点的后台页面，考虑使用EXTJs。可考虑到协议的问题，最终还是放弃了，继续使用jQuery吧。传统的后台页面布局是表格套表格，加上freamset已经ifream，当然也可以做到美观，可那是一个乱啊。下面介绍一个jQuery的插件，目前除了官方的英文文档，还没有发现可用的中文说明。用我极差的文笔在这里发表一下，希望大家不要介意。只是把自己的收获与大家分享一下。废话不多说，上正题！

 

首先，这个插件叫做：jQuery UI.Layout Plug-in  官方站点：http://layout.jquery-dev.net/

 

必须的文件是，jquery.js，jquery-ui.js，还有就是这个插件的js。但在研究的过程中发现了一个问题，在官网下载的js是有问题的，甚至性能上都有问题。要下载官网示例中使用的js，切记。。地址：http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js

 

我还是硬着头皮把官方的文档看完了，可怜我那点英语水平啊。

 

把必要的js引入后，其实就可以正常运行了，参见官方最简单的那个示例，如下：

Js代码  

1. <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>  
2. <script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>  
3. <script src="js/jquery.layout-latest.js" type="text/javascript"></script>  
4. <SCRIPT type="text/javascript">  
5. $(document).ready(function () {  
6.     $('body').layout({ applyDefaultStyles: true });  
7. });  
8. </SCRIPT>  
9.   
10. <DIV class="ui-layout-center">Center</DIV>  
11. <DIV class="ui-layout-north">North</DIV>  
12. <DIV class="ui-layout-south">South</DIV>  
13. <DIV class="ui-layout-east">East</DIV>  
14. <DIV class="ui-layout-west">West</DIV>  

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script><script src="js/jquery.layout-latest.js" type="text/javascript"></script><SCRIPT type="text/javascript">$(document).ready(function () {$('body').layout({ applyDefaultStyles: true });});</SCRIPT><DIV class="ui-layout-center">Center</DIV><DIV class="ui-layout-north">North</DIV><DIV class="ui-layout-south">South</DIV><DIV class="ui-layout-east">East</DIV><DIV class="ui-layout-west">West</DIV>

 

下面解释一下属性：

Js代码  

1. $(function(){  
2.         var myLayout =$("body").layout(  
3.                             {     
4.                                 applyDefaultStyles: true,//应用默认样式  
5.                                 scrollToBookmarkOnLoad:false,//页加载时滚动到标签  
6.                                 showOverflowOnHover:false,//鼠标移过显示被隐藏的，只在禁用滚动条时用。  
7.                                 north__closable:false,//可以被关闭  
8.                                 north__resizable:false,//可以改变大小  
9.                                 north__size:50,//pane的大小  
10.                                 spacing_open:8,//边框的间隙  
11.                                 spacing_closed:60,//关闭时边框的间隙  
12.                                 resizerTip:"可调整大小",//鼠标移到边框时，提示语  
13.                                 //resizerCursor:"resize-p" 鼠标移上的指针样式  
14.                                 resizerDragOpacity:0.9,//调整大小边框移动时的透明度  
15.                                 maskIframesOnResize:"#ifa",//在改变大小的时候，标记iframe（未通过测试）  
16.                                 sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后，当鼠标移到边框上显示的提示语。  
17.                                 sliderCursor:"pointer",//在某个Pane隐藏后，当鼠标移到边框上时的指针样式。  
18.                                 slideTrigger_open:"dblclick",//在某个Pane隐藏后，鼠标触发其显示的事件。(click", "dblclick", "mouseover)  
19.                                 slideTrigger_close:"click",//在某个Pane隐藏后，鼠标触发其关闭的事件。("click", "mouseout")  
20.                                 togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语  
21.                                 togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语  
22.                                 togglerLength_open:100,//pane打开时，边框按钮的长度  
23.                                 togglerLength_closed:200,//pane关闭时，边框按钮的长度  
24.                                 hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过)  
25.                                 togglerAlign_open:"left",//pane打开时，边框按钮显示的位置  
26.                                 togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置  
27.                                 togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content   
28.                                 togglerContent_closed:"<img/>",//pane关闭时，同上。  
29.                                 enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。  
30.                                 customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt  
31.                                 south__customHotkey:"shift+0",//自定义快捷键（测试未通过）  
32.                                 fxName:"drop",//打开关闭的动画效果  
33.                                 fxSpeed:"slow",//动画速度  
34.                                 //fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试)  
35.                                 //initClosed:true,//初始时，所有pane关闭  
36.                                 //initHidden:true //初始时，所有pane隐藏  
37.                                 onresize :ons,//调整大小时调用的函数  
38.                                 onshow_start:start,  
39.                                 onshow_end:end  
40.                                 /* 
41.                                 其他回调函数 
42.                                  
43.                                 显示时调用 
44.                                 onshow = "" 
45.                                 onshow_start = ""  
46.                                 onshow_end = ""  
47.                                 隐藏时调用 
48.                                 onhide = ""  
49.                                 onhide_start = ""  
50.                                 onhide_end = ""  
51.                                 打开时调用 
52.                                 onopen = ""  
53.                                 onopen_start = ""  
54.                                 onopen_end = ""  
55.                                 关闭时调用 
56.                                 onclose = ""  
57.                                 onclose_start = ""  
58.                                 onclose_end = ""  
59.                                 改变大小时调用 
60.                                 onresize = ""  
61.                                 onresize_start = ""  
62.                                 onresize_end = ""  
63.                                 */  
64.                             }  
65.         );  
66.           
67.   
68.     });  

$(function(){var myLayout =$("body").layout({ applyDefaultStyles: true,//应用默认样式scrollToBookmarkOnLoad:false,//页加载时滚动到标签showOverflowOnHover:false,//鼠标移过显示被隐藏的，只在禁用滚动条时用。north__closable:false,//可以被关闭north__resizable:false,//可以改变大小north__size:50,//pane的大小spacing_open:8,//边框的间隙spacing_closed:60,//关闭时边框的间隙resizerTip:"可调整大小",//鼠标移到边框时，提示语//resizerCursor:"resize-p" 鼠标移上的指针样式resizerDragOpacity:0.9,//调整大小边框移动时的透明度maskIframesOnResize:"#ifa",//在改变大小的时候，标记iframe（未通过测试）sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后，当鼠标移到边框上显示的提示语。sliderCursor:"pointer",//在某个Pane隐藏后，当鼠标移到边框上时的指针样式。slideTrigger_open:"dblclick",//在某个Pane隐藏后，鼠标触发其显示的事件。(click", "dblclick", "mouseover)slideTrigger_close:"click",//在某个Pane隐藏后，鼠标触发其关闭的事件。("click", "mouseout")togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语togglerLength_open:100,//pane打开时，边框按钮的长度togglerLength_closed:200,//pane关闭时，边框按钮的长度hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过)togglerAlign_open:"left",//pane打开时，边框按钮显示的位置togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content togglerContent_closed:"<img/>",//pane关闭时，同上。enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用altsouth__customHotkey:"shift+0",//自定义快捷键（测试未通过）fxName:"drop",//打开关闭的动画效果fxSpeed:"slow",//动画速度//fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试)//initClosed:true,//初始时，所有pane关闭//initHidden:true //初始时，所有pane隐藏onresize :ons,//调整大小时调用的函数onshow_start:start,onshow_end:end/*其他回调函数显示时调用onshow = ""onshow_start = "" onshow_end = "" 隐藏时调用onhide = "" onhide_start = "" onhide_end = "" 打开时调用onopen = "" onopen_start = "" onopen_end = "" 关闭时调用onclose = "" onclose_start = "" onclose_end = "" 改变大小时调用onresize = "" onresize_start = "" onresize_end = "" */});});

 

有些遗漏的还得参见官网。

 

如果不应用默认的样式呢？也就是applyDefaultStyles: false（默认）的时候。就需要一个css了，献上我测试后的css，如下：

Css代码  

1. body {  
2.     font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;  
3.     font-size:   80%;  
4.     *font-size:  80%;  
5. }  
6.   
7. /*  
8. 三种必备样式为：  
9. paneClass:    "ui-layout-pane" 窗格样式  
10. resizerClass: "ui-layout-resizer" 拉动条样式  
11. togglerClass: "ui-layout-toggler" 拉动条上按钮样式  
12. */  
13.   
14. /*  
15.  所有窗格应用的样式,也是必备样式  
16. ui-layout-pane   
17. ui-layout-pane-[PANE-NAME]（东南西北中，如：ui-layout-pane-west。这个样式放入基本样式下方，可覆盖原样式。 ）   
18. ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打开时的样式）  
19. ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。）  
20. */  
21. .ui-layout-pane {   
22.     background: #dfe8f6;  
23.     border:     0px solid #8db2e3;  
24.     padding:    10px;   
25.     overflow:   auto;  
26. }  
27.     /*非必备样式，描述窗格中的内容*/  
28.     .ui-layout-content {  
29.         padding:    10px;  
30.         position:   relative;   
31.         overflow:   auto;  
32.     }  
33.   
34. /*  
35.  *  所有拉动条的样式  
36.  */  
37. .ui-layout-resizer  {   
38.     background:     #dfe8f6;  
39.     border:         1px solid #BBB;  
40.     border-width:   0;  
41.     }  
42.     /*  
43.      * 拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。  
44.      */  
45.     .ui-layout-resizer-drag {  
46.     }  
47.       
48.     /*鼠标移动到拉动条时的样式*/  
49.     .ui-layout-resizer-hover{  
50.     }  
51.     /*   
52.      *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。  
53.      */  
54.     /*.ui-layout-resizer-open-hover ,   */  
55.     .ui-layout-resizer-dragging {     
56.         background:#aaaaaa;  
57.     }  
58.   
59.     /*拖动拉动条时，到最大或最小边缘时的样式*/  
60.     .ui-layout-resizer-dragging-limit {  
61.         background: #E1A4A4; /* red */  
62.     }  
63.   
64.     /*拉动条关闭时，的样式。*/  
65.     .ui-layout-resizer-closed-hover {   
66.         background: #FFCC00;  
67.     }  
68.       
69.     /*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/  
70.     .ui-layout-resizer-sliding {      
71.         opacity: .10;   
72.         filter:  alpha(opacity=10);  
73.         }  
74.         /*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时，鼠标悬停在拉动条上的样式*/  
75.         .ui-layout-resizer-sliding-hover {  
76.             opacity: 1.00;   
77.             filter:  alpha(opacity=100);  
78.         }  
79.   
80.   
81.   
82.       
83.   
84. /*  
85.  *  拖动杆上的按钮  
86.  */  
87. .ui-layout-toggler {  
88.     border: 1px solid #CCCCCC;   
89.     background-color: #bcd2ef;  
90.     opacity: .60;  
91.     filter:  alpha(opacity=60);  
92.     }  
93.       
94. /*  
95.     鼠标悬停在拉动条时的样式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。  
96.     .ui-layout-resizer-hover  
97.  */  
98.       
99.       
100.     /*鼠标悬停在拖动条上按钮的样式*/  
101.     .ui-layout-toggler-hover {  
102.         background-color: #0099FF；  
103.         opacity: 1.00;  
104.         filter:  alpha(opacity=100);  
105.     }  
106.       
107.     /*窗格关闭后，半打开状态的拉动条是隐藏的*/  
108.     .ui-layout-resizer-sliding  ui-layout-toggler {  
109.         display: none;  
110.     }  
111.   
112.   
113. /*貌似是按钮上的文字内容*/  
114.     .ui-layout-toggler .content {  
115.     background:#FFFF00;  
116.         color: #66FFCC;  
117.         font-size:      12px;  
118.         font-weight:    bold;  
119.         width:          100%;  
120.         padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */  
121.     }  

body {font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;font-size:   80%;*font-size:  80%;}/*三种必备样式为：paneClass:    "ui-layout-pane" 窗格样式resizerClass: "ui-layout-resizer" 拉动条样式togglerClass: "ui-layout-toggler" 拉动条上按钮样式*//* 所有窗格应用的样式,也是必备样式ui-layout-pane ui-layout-pane-[PANE-NAME]（东南西北中，如：ui-layout-pane-west。这个样式放入基本样式下方，可覆盖原样式。 ） ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打开时的样式）ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。）*/.ui-layout-pane { background: #dfe8f6;border:0px solid #8db2e3;padding:10px; overflow:auto;}/*非必备样式，描述窗格中的内容*/.ui-layout-content {padding:10px;position:relative; overflow:auto;}/* *所有拉动条的样式 */.ui-layout-resizer{ background:#dfe8f6;border:1px solid #BBB;border-width:0;}/* * 拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。 */.ui-layout-resizer-drag {}/*鼠标移动到拉动条时的样式*/.ui-layout-resizer-hover{}/*      *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。 *//*.ui-layout-resizer-open-hover ,*/.ui-layout-resizer-dragging {background:#aaaaaa;}/*拖动拉动条时，到最大或最小边缘时的样式*/.ui-layout-resizer-dragging-limit {background: #E1A4A4; /* red */}/*拉动条关闭时，的样式。*/.ui-layout-resizer-closed-hover{ background: #FFCC00;}/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/.ui-layout-resizer-sliding {opacity: .10; filter:  alpha(opacity=10);}/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时，鼠标悬停在拉动条上的样式*/.ui-layout-resizer-sliding-hover {opacity: 1.00; filter:  alpha(opacity=100);}/* *拖动杆上的按钮 */.ui-layout-toggler {border: 1px solid #CCCCCC; background-color: #bcd2ef;opacity: .60;filter:  alpha(opacity=60);}/*鼠标悬停在拉动条时的样式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。.ui-layout-resizer-hover *//*鼠标悬停在拖动条上按钮的样式*/.ui-layout-toggler-hover {background-color: #0099FF；opacity: 1.00;filter:  alpha(opacity=100);}/*窗格关闭后，半打开状态的拉动条是隐藏的*/.ui-layout-resizer-sliding  ui-layout-toggler {display: none;}/*貌似是按钮上的文字内容*/.ui-layout-toggler .content {background:#FFFF00;color: #66FFCC;font-size:12px;font-weight:bold;width:100%;padding-bottom:0.35ex; /* to 'vertically center' text inside text-span */}

 

极大部分已经测试过了，参考官方示例中给出的css，地址：http://layout.jquery-dev.net/lib/css/layout-default-latest.css

 

 

时间原因，不能阐述太多了，本人英文水平很差，如有错误，请大家及时指正。