jQuery布局插件UI Layout简介及使用方法


Posted in Javascript onApril 03, 2013

UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/。该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使用ExtJS的项目改造成jQuery项目。其核心是一个大小自适应的中心面板(必选),面板的上下左右四个方向可以放置可折叠、可缩放的面板(可选),各个面板可以添加任意数量的页眉和页脚面板。UI Layout支持内层布局的嵌套,任意块元素都可以当作布局的容器,最基本的布局容器是body。

基本使用方法:获取容器元素并调用layout方法,传入配置参数(可选)options即可:
$('body').layout( [options] );通常保留布局的引用,以便于进一步通过代码控制布局的形态。

var myLayout = $('body').layout(); 
// 读取布局配置选项 
var is_west_resizable = myLayout.options.west.resizable; 
var north_maxHeight = myLayout.options.north.maxSize; 
// 调用布局函数 
myLayout.toggle("north"); 
myLayout.sizePane("west", 300); 
// 调用布局工具 
myLayout.addPinBtn("#myPinButton", "west"); 
myLayout.allowOverflow("north");

所有面板基于现有的HTML元素,而面板的附属组件(缩放器和折叠开关)是自动生成的div元素,并且加上了对应的class属性。几乎所有的面板元素都必须是容器元素的直接子元素,form容器是一个例外。我们可以为相应的HTML元素赋予默认的类名,或者自定义的类名、id,来指定布局面板。下面举个直观的例子:
$(document).ready(function() { 
$("body").layout({ 
/* 
east & west panes require 'ID' selectors 
because they are 'nested inside a div' 
*/ 
west__paneSelector: "#west" 
, east__paneSelector: "#east" 
/* 
north & south panes are 'children of body' 
*/ 
, north__paneSelector: ".ui-layout-north"//默认配置,可省略 
, south__paneSelector: ".myclass-south" 
/* 
center pane is a 'child of the first form' 
default-selector shown just for reference 
*/ 
, center__paneSelector: ".ui-layout-center"//默认配置,可省略 
}); 
});

对应的页面:
<body> 
<!-- 'north' & 'south' are children of body --> 
<div class="ui-layout-north">north</div> 
<div class="myclass-south">south</div> 
<!-- 'center' is nested inside a form --> 
<form> 
<div class="ui-layout-center">center</div> 
</form> 
<!-- 'east' & 'west' are nested inside a div --> 
<div> 
<div id="west">west</div> 
<div id="east">east</div> 
</div> 
</body>

在本例中,布局容器是body,南、北面板是容器的直接子元素,南面板使用自定义类名“myclass-south”,需要在布局参数south__paneSelector中指定jQuery选择器;北面板使用默认类名“ui-layout-north”。东、西面板不是容器的直接子元素,需要指定id才能识别(不可以用类选择器),并且在布局参数“west__paneSelector”中指明对应的id。中心面板嵌套在form中,此时面板可以使用默认类名或自定义类名来识别。当一个面板满足下列两个条件时才可以使用自定义类选择器,否则只能用id选择器来识别:1、面板是form的直接子元素2、该form是容器的直接子元素,并且是容器中的第一个form。

面板之间的空隙构成了面板的边,边的概念是相对于上下左右方向的面板而言的,由于可以设置拖动面板的边实现对应面板的缩放,所以称这些边为“缩放器”;缩放器上面通常附加一个折叠开关负责面板的折叠与打开。当两个面板之间没有空隙时,缩放器和折叠开关随之消失。面板打开和折叠状态下,缩放器的宽度可以分别指定为不同的值。上例的效果图如下:
jQuery布局插件UI Layout简介及使用方法

Javascript 相关文章推荐
解读JavaScript中 For, While与递归的用法
May 07 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 #Javascript
JS获取浏览器版本及名称实现函数
Apr 02 #Javascript
js 火狐下取本地路径实现思路
Apr 02 #Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 #Javascript
JQuery给元素添加/删除节点比如select
Apr 02 #Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 #Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 #Javascript
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python模拟登陆实现代码
2017/06/14 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
大专学生推荐信范文
2013/11/19 职场文书
大学生村官工作感言
2014/01/10 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
求职面试个人自我评价
2014/02/28 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
工会文体活动总结
2015/05/07 职场文书
党小组推荐意见
2015/06/02 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python