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 web页面刷新的方法收集
Jul 02 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
javascript自定义的addClass()方法
May 28 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 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中常见的mongodb查询操作
2013/06/20 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
安装Python的教程-Windows
2017/07/22 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python文件和文件夹复制函数
2020/02/07 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
企业安全生产责任书
2014/04/14 职场文书
感恩节活动策划方案
2014/05/16 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js