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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
原生js生成图片验证码
Oct 11 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
用PHP实现文件上传二法
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php异常处理方法实例汇总
2015/06/24 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
js中小数转换整数的方法
2014/01/26 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python中的itertools的使用详解
2020/01/13 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
极简的HTML5模版
2015/07/09 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
升职自荐信
2013/11/28 职场文书
搞笑车尾标语
2014/06/23 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
领导干部失职检讨书
2015/05/05 职场文书
入党申请书怎么写?
2019/06/11 职场文书
导游词之襄阳古城
2019/09/27 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Mysql基础知识点汇总
2021/05/26 MySQL