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 ...
随机推荐
- Light OJ 1341 Aladdin and the Flying Carpet Pollard_rho整数分解+DFS
进入a b 多少努力p, q 使p*q == a && p < q && p >= b 直接大整数分解 然后dfs所有可能的解决方案劫持 #include ...
- nova-compute[5410]: OSError: [Errno 13] Permission denied: '图像路径'
前几天有 openstack-Nova 创建虚拟机拨弄了一下,结果重新启动后的今天 nova boot 创建虚拟机实例有错误,创建虚拟机出状况 他们是 error 视图 openstack 服务状态 ...
- DOS call 中的%cd%,当前文件夹演示
最近的工作要处理.bat文件,在dos文件错综复杂的调用过程中,我迷失了,于是%cd% @echo %cd% @cd %cd%\-- @pause @call %cd%\--\1.bat @pause ...
- hdu 4915 Parenthese sequence--2014 Multi-University Training Contest 5
主题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4915 Parenthese sequence Time Limit: 2000/1000 MS (Ja ...
- AspNet.WebAPI.OData.ODataPQ
AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务 AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-(个人拙笔) AspNet. ...
- Contoso 大学 - 使用 EF Code First 创建 MVC 应用,实例演练
Contoso 大学 Web 示例应用演示了如何使用 EF 技术创建 ASP.NET MVC 应用.示例中的 Contoso 大学是虚构的.应用包括了类似学生注册.课程创建以及教师分配等功能. 这个系 ...
- C#命令模式-设计模式学习
命令模式(Command Pattern) 概述 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变 ...
- MVC EF 修改 封装类 通用泛型方法(一)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- sql语句查询列的说明
SELECT C.name,value FROM sys.columns C INNER JOIN sys.tables T ON C.object_id = T.object_idINNER JOI ...
- sqlite学习笔记5:插入数据,查询数据和删除数据
曾闻:全部的编程都是已数据为中心,觉得很有道理. 所谓数据库数据库,没有数据叫什么数据库,接下来就看看怎样在表中插入数据. 一 插入数据 1 创建一张表 首先为了插入数据,须要先创建一张表: CREA ...