JQuery UI Layout Plug-in布局
端]使用JQuery UI Layout Plug-in布局
引言
使用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
JQuery UI Layout Plug-in布局的更多相关文章
- [前端]使用JQuery UI Layout Plug-in布局 - wolfy
引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...
- [前端]使用JQuery UI Layout Plug-in布局
引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...
- JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
- jQuery UI.Layout 参数
applyDefaultStyles: true,//应用默认样式 scrollToBookmarkOnLoad:false,//页加载时滚动到标签 showOverflowOnHover:false ...
- jQuery easyui layout布局自适应浏览器大小(转)
首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...
- 【转】推荐10款最热门jQuery UI框架
推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...
- jQuery ui 框架
jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...
- jQuery UI 之 EasyUI 快速入门
jQuery EasyUI 基础 转载自(http://www.shouce.ren/api/view/a/3350) jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面 ...
- jquery ui的css设计
jquery ui 是当前最强大的UI库之一,其两大卖点是对IE6的良好支持与换肤功能.为了构建avalon ui,今天起我将投入一部分精力来研究时下最流行的几个CSS框架.它是首当其冲. jquer ...
随机推荐
- Android在第三方应用程序系统应用尽早开始,杀死自己主动的第三方应用程序,以重新启动
1.为什么第三方应用程序可能早于System的app启动? Android能够查阅了,这里就不细述了,这里不阐述ROM启动还有bootloader.软件启动的大致流程应该是 启动kernel 执行se ...
- HTTP必知必会(转)
HTTP协议作为网络传输的基本协议,有着广泛的应用.HTTP协议的完整内容很多,但是其核心知识却又简单精炼.学习者应该掌握其基本结构,并且能够举一反三.这篇文章所列的,就是在实际开发中必须知道必须掌握 ...
- 写手Remoting测试工具
基于.NET开发分布式系统.经经常使用到Remoting技术.在測试驱动开发流行的今天.假设针对分布式系统中的每一个Remoting接口的每一个方法都要写具体的測试脚本,无疑很浪费时间.所以,我想写一 ...
- React.js初探(一)
前端框架多如牛毛的今天,团队的技术选型很重要,没有最好的,只有最合适的,这话早已经被说烂了. 但是作为一个有追求的前端,对新技术的敏感以及尝试心理还是要有的. 虽然React已经火的不行了,但由于自己 ...
- 讨论IT选定的技术招聘企业几点
在实际的招聘总结的几点思考,企业需要怎么样的人才,例如,以下个人总结: 1.技术能力是不是第一次 企业的时候,你往往看第一点的人的招聘是不是技术实力.但是,你的个人言论的行为和态度.能在半个小时内把你 ...
- session什么时候被创建
一个常见的错误是以为 session 在有客户端访问时就被创建,然而事实是直到某 server 端程序(如 Servlet )调用HttpServletRequest.getSession(true) ...
- Python系列教程大汇总
Python初级教程 Python快速教程 (手册) Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Pyt ...
- .NET:从 Mono、.NET Core 说起
魅力 .NET:从 Mono..NET Core 说起 前段时间,被问了这样一个问题:.NET 应用程序是怎么运行的? 当时大概愣了好久,好像也没说出个所以然,得到的回复是:这是 .NET 程序员最基 ...
- C语言 链表
原文:C语言 链表 最近在复习数据结构,想把数据结构里面涉及的都自己实现一下,完全是用C语言实现的. 自己编写的不是很好,大家可以参考,有错误希望帮忙指正,现在正处于编写阶段,一共将要实现19个功能. ...
- Android开发之Mediaplayer
Android提供了常见的音频.视频的编码.解码机制.借助于多媒体类MediaPlayer的支持,开发者能够非常方便在在应用中播放音频.视频.本篇博客主要解说在Android平台下怎样播放一个音频文件 ...