jQuery布局插件UILayout简介及使⽤⽅法
UI Layout是⼀种基于jQuery的布局框架，项⽬主页layout.jquery-dev/。该框架的参考原型是ExtJS的border-layout，因此⼗分适⽤于将原有使⽤ExtJS的项⽬改造成jQuery项⽬。其核⼼是⼀个⼤⼩⾃适应的中⼼⾯板（必选），⾯板的上下左右四个⽅向可以放置可折叠、可缩放的⾯板（可选），各个⾯板可以添加任意数量的页眉和页脚⾯板。UI Layout⽀持内层布局的嵌套，任意块元素都可以当作布局的容器，最基本的布局容器是body。
基本使⽤⽅法：获取容器元素并调⽤layout⽅法，传⼊配置参数（可选）options即可：
$('body').layout( [options] )；通常保留布局的引⽤，以便于进⼀步通过代码控制布局的形态。
复制代码代码如下:
var myLayout = $('body').layout();
// 读取布局配置选项
var is_west_resizable = myLayout.sizable;
var north_maxHeight = h.maxSize;
// 调⽤布局函数
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 -->
jquery是什么选择器<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。
⾯板之间的空隙构成了⾯板的边，边的概念是相对于上下左右⽅向的⾯板⽽⾔的，由于可以设置拖动⾯板的边实现对应⾯板的缩放，所以称这些边为“缩放器”；缩放器上⾯通常附加⼀个折叠开关负责⾯板的折叠与打开。当两个⾯板之间没有空隙时，缩放器和折叠开关随之消失。⾯板打开和折叠状态下，缩放器的宽度可以分别指定为不同的值。上例的效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。