jQuery布局插件UI Layout简介及使用方法

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。

面板之间的空隙构成了面板的边，边的概念是相对于上下左右方向的面板而言的，由于可以设置拖动面板的边实现对应面板的缩放，所以称这些边为“缩放器”；缩放器上面通常附加一个折叠开关负责面板的折叠与打开。当两个面板之间没有空隙时，缩放器和折叠开关随之消失。面板打开和折叠状态下，缩放器的宽度可以分别指定为不同的值。上例的效果图如下：

赞 (0)

相关推荐

  • Android中的jQuery:AQuery简介

    Android中的jQuery:AQuery简介

    为了向你展示Android Query能够够为用户界面开发做到什么,我们从他们的项目页面上引用了一个例子. 这是在使用AQuery之前的代码: 这是使用AQuery之后的代码: 熟悉的jQuery语法再次涌现,兴奋之情有木有. AQuery项目地址:https://github.com/androidquery/androidquery Android Query简化了附加事件处理程序的过程.它不会构建出接口或者匿名类,我们只需要确保它们不会把事件处理程序的方法名拼写错. 复制代码 代码如下:

  • jQuery入门知识简介

    到目前为之jQuery已经发布到1.4.2版本,而在这之前的一个星期他们刚发布1.4版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本:而且不断有人开发出新的 jQuery插件 ,最近又推出了 jQuery UI 库 jQuery于2006年一月十四号在BarCamp NYC (New York City)面世.主将 John Resig ,写有<Pro JavaScript Techniques>一书,因为效力于mozolla,据说firefox 3将包含Jque

  • jQuery mobile类库使用时加载导航历史的方法简介

    jQuery.mobile.navigate( url [, data ] ) 改变URL和跟踪历史.作品为浏览器和无历史新的API url:是必须的参数.类型:字符串 data:是可选的参数.类型:对象. 更改哈希片段两次然后日志提供导航事件数据时,浏览器向后移动的历史 // Starting at http://example.com/ // Alter the URL: http://example.com/ => http://example.com/#foo $.mobile.navi

  • jQuery简介_动力节点Java学院整理

    江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery.鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它. jQuery这么流行,肯定是因为它解决了一些很重要的问题.实际上,jQuery能帮我们干这些事情: 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码: 简洁的操作DOM的方法:写$('#test')肯定比document.getElementById('test')来得简洁: 轻松实现

  • Jquery图形报表插件 jqplot简介及参数详解

    功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条提示和高亮数据点 默认最优设置,非常易于使用 以上功能在jqPlot主页中的示例页面有 很多直观的展示.这里是它详细使用文档. 缺点:柱状图无法显示具体数据值.饼状图无法显示具体百分比. 下边是搜集的详细参数配置: 复制代码 代码如下: options = { seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228"

  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3

  • jQuery布局插件UI Layout简介及使用方法

    jQuery布局插件UI Layout简介及使用方法

    UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使用ExtJS的项目改造成jQuery项目.其核心是一个大小自适应的中心面板(必选),面板的上下左右四个方向可以放置可折叠.可缩放的面板(可选),各个面板可以添加任意数量的页眉和页脚面板.UI Layout支持内层布局的嵌套,任意块元素都可以当作布局的容器,最基本的布局容器是body. 基本使用方法:

  • jQuery validate插件submitHandler提交导致死循环解决方法

    本文实例讲述了jQuery validate插件submitHandler提交导致死循环解决方法.分享给大家供大家参考,具体如下: dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$('').submit();提交时,jquery validate会进行验证,submitHandler里面如果写了$('').submit();会导致死循环,而form.

  • 浅谈jquery fullpage 插件增加头部和版权的方法

    前言 一个页面,我们通过 jquery-fullpage 插件来制作,整个是全屏滚动的.但是,我们希望在最后一页增加一个版权,大概只有 100px 高,而不需要一个全屏来放版权.怎么做呢?搜索了一下,说了各种方法.什么修改源码啦之类的,或者自己写代码判断啦.晕死.其实,官方给出了解决方案. 下面,我们简单的说下是怎么实现的 实现其实只需要 html 部分 <div class="fullpage"> <div class="section fp-auto-h

  • jQuery布局组件EasyUI Layout使用方法详解

    jQuery布局组件EasyUI Layout使用方法详解

    layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便. 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中的界面布局之外就没别的办法了,虽然我们可以用ifame切分出一个界面布局,但是我不会添加样式啊.使用layout组件就可以帮我们快速的有一个界面布局,而且美观效果也看得过去. 看个例子: <!doctype html> <html lang="en"&

  • jQuery validate插件功能与用法详解

    jQuery validate插件功能与用法详解

    本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

  • JQuery日历插件My97DatePicker日期范围限制

    JQuery日历插件My97DatePicker日期范围限制

    本文实例向大家介绍了JQuery日历插件My97DatePicker日期范围限制的方法,分享给大家供大家参考,具体内容如下 ```<input class="Wdate" id="d1" onclick="WdatePicker()" /> 下面重点说明日期范围限制: 1)静态限制 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围 示例1.1:限制日期的范围是 2012-12-1到2

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • 广泛收集的jQuery拖放插件集合

    广泛收集的jQuery拖放插件集合

    今天分享给大家一些非常棒的的jQuery插件拖放功能. 有了这些插件,你会允许你的访问者个性化的网站和它的工具,根据自己的需要,并以这种方式,你提供定制选项的负载展现方式 jQuery mb.containerPlus (演示 | 下载) 在建立功能齐全,完全可换肤的容器,这是一个有用的插件.容器可以设置拖动,调整大小,可折叠和可最小化. jQuery的卷轴插件 (演示 | 下载) 卷轴是一个jQuery插件,它需要一个图片标签,使现场的"投影"的预建动画帧序列.其目的是要提供360°

  • noty – jQuery通知插件全面解析

    noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件. 当前最新版本为2.1.0: 从 https://github.com/needim/noty 可以获取最新源代码. 布局样式 支持的提示样式,每种样式都有预定义好的css样式: •alert: 默认的提示样式 •success: 成功 •error: 错误 •warning: 警告 •information: 信息 支持的布局位置: •top: 顶部,长条状 •topLeft/topCent

  • jQuery Validate插件实现表单验证

    jQuery Validate插件实现表单验证

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.更重要的是他是由jQuery 团队. jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的.具体我们可以访问 jQuery Validate 官网,下载

随机推荐