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 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
jquery插件格式实例分析
Jun 16 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
简单实例处理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
php中cookie的作用域
2008/03/27 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python列表生成式与生成器操作示例
2018/08/01 Python
python多进程读图提取特征存npy
2019/05/21 Python
详解python深浅拷贝区别
2019/06/24 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
使用django自带的user做外键的方法
2020/11/30 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
中学生运动会入场词
2014/02/12 职场文书
求职自我推荐信
2014/06/25 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
个人总结与自我评价
2015/02/14 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书