引言

使用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布局 - wolfy的更多相关文章

  1. [前端]使用JQuery UI Layout Plug-in布局

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  2. JQuery UI Layout Plug-in布局

    端]使用JQuery UI Layout Plug-in布局   引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布 ...

  3. JQuery EasyUI Layout 在from布局自适应窗口大小

    在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...

  4. jQuery UI.Layout 参数

    applyDefaultStyles: true,//应用默认样式 scrollToBookmarkOnLoad:false,//页加载时滚动到标签 showOverflowOnHover:false ...

  5. 知问前端——概述及jQuery UI

    知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...

  6. 前端基于jquery的UI框架

    正在做的一个项目选择jquery作为前端js核心库.然后就想选一个基于jquery的ui库,然后悲催的事情发生了. 至于为什么使用jquery,一是因为不想为授权费用,而又不想引起可能法律纠纷:另一方 ...

  7. 第一百七十七节,jQuery,知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  8. 这 5 个前端组件库,可以让你放弃 jQuery UI

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...

  9. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

随机推荐

  1. Android怎么找到最优适配资源

    当我们将一些提供了不同的资源文件可供Android系统选择的时候,Android会在运行时会根据一套适配的规则选择最符合当前配置的资源.为了说明Android怎么选择资源,假设我们有以下可选的资源文件 ...

  2. 从Windows中卸载Apache

    在重装Apache或者妳不再需要它的时候,这时就需要将它卸载. 下面是步骤: 打开开始菜单(win8中ÿ+X)或者我的电脑(废话) 找到并打开Apache的安装目录(Program Files\Apa ...

  3. Azure China (5) 管理Azure China Powershell

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China Cloud Update 2015-09-01 发现一个新的命令,在 ...

  4. AngularJS入门教程1--配置环境

    首先需要下载AngualrJS,下载地址 https://angularjs.org/ 官方网站提供2种下载使用AngularJS方法: 1. 去GitHub下载 ,点击按钮会跳转到GitHub页面, ...

  5. IOS Animation-贝塞尔曲线与Layer简单篇(一)

    IOS Animation-贝塞尔曲线与Layer简单篇 swift篇 1.介绍 贝塞尔曲线: 贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一.它通过控制曲线上的四个点( ...

  6. python导入模块和包的使用

    做项目的时候经常会要求做到模块化管理,即同样功能的代码放到同一个文件夹下,以便于方便管理,相信很多人对模块的引用都模糊不清,今天鄙人在这里就总结下. 一.模块导入的使用 在同一个文件夹下有两个文件分别 ...

  7. C# LINQ需求实现演化

    Linq是C#3.0引入的,在C#2.0实现从集合中过滤符合条件的记录实现方式. 假设有一个Book类,以及一个Book类的集合,现在需要从集合中查找出单价大于50的Book. 1.固定查询字段的实现 ...

  8. 反质数问题,求不大于n的最大反质数

    反质数:设f(n)表示n个约数的个数,如果对于任意x有0<x<n, f(x) < f(n),那么n就是一个反质数 我们都知道对于任意一个数n,都可以用质数乘积的形式表示出来:x = ...

  9. vs xamarin android SharedPreferences

    读 PreferenceManager.GetDefaultSharedPreferences(this).GetInt("uid", 0); 写 var editor = Pre ...

  10. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...