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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
XENON基于JSON变种
Jul 27 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
JS代码编译器Monaco使用方法
Jun 11 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导入Excel到MySQL的方法
2011/04/23 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Form表单及django的form表单的补充
2019/07/25 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
new修饰符是起什么作用
2015/06/28 面试题
工作中个人的自我评价
2013/12/31 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
委托书格式要求
2015/01/28 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2016新年年会主持词
2015/07/06 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python