jQuery布局插件UI Layout的介绍和使用

UI Layout是一个基于jQuery的布局框架，项目的首页是http://layout.jquery-dev.net/.这个框架的参考原型是ExtJS的边框布局，所以非常适合将原来使用ExtJS的项目转化为jQuery项目。其核心是具有自适应尺寸的中心面板(必需)。可折叠和可伸缩的面板可以放置在面板的四个方向上(可选)，每个面板可以添加任意数量的页眉和页脚面板。UI Layout支持内部布局的嵌套，任何块元素都可以作为布局容器，最基本的布局容器是body。基本用法：获取容器元素并调用布局方法，然后传入配置参数(可选)选项：$(“body”)。布局([选项])；通常会保留布局的引用，以便通过代码进一步控制布局的形式。复制代码如下： var mylayout=$ ('body ')。布局()；//读取布局配置选项var is _ west _ resized=mylayout . options . west . resized；var north _ maxHeight=mylayout . options . north . maxsize；//调用布局函数mylayout . toggle(' north ')；myLayout.sizePane('west '，300)；//调用布局工具mylayout . addpinbtn(' mypinbutton '，' west ')；mylayout . allowoverflow(' north ')；所有面板都基于现有的HTML元素，而面板的辅助组件(缩放器和折叠开关)是自动生成的div元素，并添加了相应的类属性。几乎所有面板元素都必须是容器元素的直接子元素，表单容器除外。我们可以将默认类名或用户定义的类名和id分配给相应的HTML元素来指定布局面板。这里有一个直观的例子：复制代码如下： $(文档)。ready (function () {$ ('body '))。布局({/*。东西窗格需要“ID”选择器，因为它们“嵌套在一个div中”*/west _ _ PaneSelector :“# west”，East _ _ PaneSelector :“# East”/*南北窗格是“body的子级”*/，North _ _ PaneSelector :”。UI-布局-北'//默认配置，可以省略。South _ _ paneselector : '。我的班级-南方'/*中心窗格是“第一种形式的子级”默认选择器，仅供参考*/，中心_ _窗格选择器：UI-布局-中心'//默认配置，可省略}；});对应页面：复制代码如下：正文！-"北" "南"是body-div class=' ui-layout-north ' north/div class=' my class-south ' south/div的子级！-" center "嵌套在窗体中-窗体div class=' ui-layout-center ' center/div/form！-" east " " west "嵌套在div-div div id=' west ' west/div id=' east ' east/div/div/body中在本例中，布局容器是body，南部和北部面板是容器的直接子元素，南部面板使用用户定义的类名" myclass-south "。北面板使用默认类名“ui-layout-north”。东面板和西面板不是容器的直接子元素，因此只能通过指定id来标识(不允许使用类选择器)，相应的id在布局参数“west__paneSelector”中指示。中心面板嵌套在表单中，面板可以通过默认类名或自定义类名来标识。用户定义的类选择器只能在面板满足以下两个条件时使用，否则只能由id选择器识别：1。面板是窗体的直接子元素；2.表单是容器的直接子元素，也是容器中的第一个表单。面板之间的间隙构成了面板的边缘，边缘的概念是相对于面板的上下左右方向而言的。由于拖动面板的边缘可以设置为实现相应面板的缩放，因此这些边缘被称为“缩放器”。缩放器上通常会连接一个折叠开关，用于折叠和打开面板。当两个面板之间没有间隙时，缩放器和折叠开关消失。当面板打开和折叠时，缩放器的宽度可以指定为不同的值。上面例子的渲染如下：。