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判断屏幕分辨率的代码
Jul 16 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python pass 语句使用示例
2014/03/11 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python实现ID3决策树算法
2018/08/29 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python中if嵌套命令实例讲解
2021/02/25 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
网络研修随笔感言
2014/02/17 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
软件项目实施计划书
2014/05/02 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
清洁工个人总结
2015/03/04 职场文书
离婚上诉状范文
2015/05/23 职场文书
学历证明范文
2015/06/16 职场文书
《秋思》教学反思
2016/02/23 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python