[前端]使用JQuery UI Layout Plug-in布局 - wolfy
引言
使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的。在项目中也使用到了,不过那是前端的工作,咱不能抢别人的饭碗不是?,不过对布局多少了解点,还是非常有帮助的。
实现
JQuery UI Layout Plug-in布局框架官网: http://layout.jquery-dev.net/index.cfm
这里使用1.2.0版本的,项目结构:
首先引入:
1 <script type="text/javascript" src="Layout/jquery.js"></script>
2 <script type="text/javascript" src="Layout/jquery.layout.js"></script>
body中代码:
1 <div class="ui-layout-center">
2 Center
3 </div>
4 <div class="ui-layout-north">North</div>
5 <div class="ui-layout-south">South</div>
6 <!--<div class="ui-layout-east">East</div>-->
7 <div class="ui-layout-west">West</div>
然后就是使用layout方法进行初始化:
1 <script type="text/javascript">
2 $(function () {
3 var myLayout = $("body").layout(
4 {
5 applyDefaultStyles: true,//应用默认样式
6 scrollToBookmarkOnLoad: false,//页加载时滚动到标签
7 showOverflowOnHover: false,//鼠标移过显示被隐藏的,只在禁用滚动条时用。
8 north__closable: false,//可以被关闭
9 north__resizable: false,//可以改变大小
10 north__size: 50,//pane的大小
11 spacing_open: 8,//边框的间隙
12 spacing_closed: 60,//关闭时边框的间隙
13 resizerTip: "可调整大小",//鼠标移到边框时,提示语
14 resizerCursor:"resize-p",// 鼠标移上的指针样式
15 resizerDragOpacity: 0.9,//调整大小边框移动时的透明度
16 maskIframesOnResize: "#ifa",//在改变大小的时候,标记iframe(未通过测试)
17 sliderTip: "显示/隐藏侧边栏",//在某个Pane隐藏后,当鼠标移到边框上显示的提示语。
18 sliderCursor: "pointer",//在某个Pane隐藏后,当鼠标移到边框上时的指针样式。
19 slideTrigger_open: "dblclick",//在某个Pane隐藏后,鼠标触发其显示的事件。(click", "dblclick", "mouseover)
20 slideTrigger_close: "click",//在某个Pane隐藏后,鼠标触发其关闭的事件。("click", "mouseout")
21 togglerTip_open: "关闭",//pane打开时,当鼠标移动到边框上按钮上,显示的提示语
22 togglerTip_closed: "打开",//pane关闭时,当鼠标移动到边框上按钮上,显示的提示语
23 togglerLength_open: 100,//pane打开时,边框按钮的长度
24 togglerLength_closed: 200,//pane关闭时,边框按钮的长度
25 hideTogglerOnSlide: true,//在边框上隐藏打开/关闭按钮(测试未通过)
26 togglerAlign_open: "left",//pane打开时,边框按钮显示的位置
27 togglerAlign_closed: "right",//pane关闭时,边框按钮显示的位置
28 togglerContent_open: "<div style='background:red'>AAA</div>",//pane打开时,边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content
29 togglerContent_closed: "<img/>",//pane关闭时,同上。
30 enableCursorHotkey: true,//启用快捷键CTRL或shift + 上下左右。
31 customHotkeyModifier: "shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt
32 south__customHotkey: "shift+0",//自定义快捷键(测试未通过)
33 fxName: "drop",//打开关闭的动画效果
34 fxSpeed: "slow"//动画速度
35 //fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试)
36 //initClosed:true,//初始时,所有pane关闭
37 //initHidden:true //初始时,所有pane隐藏
38 //onresize: ons,//调整大小时调用的函数
39 //onshow_start: start,
40 //onshow_end: end
41 /*
42 其他回调函数
43
44 显示时调用
45 onshow = ""
46 onshow_start = ""
47 onshow_end = ""
48 隐藏时调用
49 onhide = ""
50 onhide_start = ""
51 onhide_end = ""
52 打开时调用
53 onopen = ""
54 onopen_start = ""
55 onopen_end = ""
56 关闭时调用
57 onclose = ""
58 onclose_start = ""
59 onclose_end = ""
60 改变大小时调用
61 onresize = ""
62 onresize_start = ""
63 onresize_end = ""
64 */
65 }
66 );
67
68
69 });
参考文章: http://www.cnblogs.com/chen-fan/articles/2044556.html
注意:在将不需要的参数注释之后,需将最后一个参数后面的“,”去掉,经测试发现有的浏览器版本不支持,看不到效果。
将不需要的参数注释之后的效果:
总结
今天在使用该布局框架的时候,一个逗号问题,折腾我很长时间,这里记录一下,提醒以后要更细心才行。
demo:链接: http://pan.baidu.com/s/1eQd1b5w 密码:m0z5