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 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 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读取MySQL数据代码
2008/06/05 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
大学毕业寄语大全
2014/04/10 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
2015年手术室工作总结
2015/05/11 职场文书
Python中的socket网络模块介绍
2022/07/23 Python