jQuery布局插件UI Layout简介

发布时间:2017-09-03 13:06:27
jQuery布局插件UI Layout简介

基本使用方法:获取容器元素并调用layout方法,传入配置参数(可选)options即可:

$('body').layout( [options] );通常保留布局的引用,以便于进一步通过代码控制布局的形态。


[javascript]
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");

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,来指定布局面板。下面举个直观的例子:

[javascript]
$(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"//默认配置,可省略
});
});

$(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"//默认配置,可省略
});
});
对应的页面:


[html]
<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>

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄石SEO http://huangshi.raoyu.net