html面板插件ui,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,南、北面板是容器的直接子元素,南面板使用自定义类名“myclass-south”,需要在布局参数south__paneSelector中指定jQuery选择器;北面板使用默认类名“ui-layout-north”。东、西面板不是容器的直接子元素,需要指定id才能识别(不可以用类选择器),并且在布局参数“west__paneSelector”中指明对应的id。中心面板嵌套在form中,此时面板可以使用默认类名或自定义类名来识别。当一个面板满足下列两个条件时才可以使用自定义类选择器,否则只能用id选择器来识别:1、面板是form的直接子元素2、该form是容器的直接子元素,并且是容器中的第一个form。
面板之间的空隙构成了面板的边,边的概念是相对于上下左右方向的面板而言的,由于可以设置拖动面板的边实现对应面板的缩放,所以称这些边为“缩放器”;缩放器上面通常附加一个折叠开关负责面板的折叠与打开。当两个面板之间没有空隙时,缩放器和折叠开关随之消失。面板打开和折叠状态下,缩放器的宽度可以分别指定为不同的值。上例的效果图如下:
html面板插件ui,jQuery布局插件UI Layout简介及使用方法相关推荐
- JQuery布局插件UI layout的使用及说明
JQuery布局插件UI layout的使用及说明 UI layout 是一款主要针对于不同开发需求下的侧边栏插件,在他官方文档是首先对这款插件的定义是: 这个插件受extJS边框布局的启发,并将该功 ...
- jQuery布局插件UI Layout简介
UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...
- 精确到秒的JQuery日期控件,jquery日历插件,jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
- html 柱状图 插件,chartjs —— jquery柱状图插件
创建图表 要创建图表,我们需要实例化Chart该类.为此,我们需要传入我们想要绘制图表的画布的节点,jQuery实例或2d上下文.这是一个例子. // Any of the following for ...
- jQuery验证插件
jQuery验证插件 原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插 ...
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- jQuery.Form插件介绍
一.前言 jQuery From插件是一个优秀的Ajax表单插件,使用它可以让你非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery From有两个主要方法:ajaxForm和ajaxSu ...
- html足球球面插件,响应式流布局插件DyLay-动画效果很赞哦!
响应式流布局插件DyLay-动画效果很赞哦! Sponsor 今天我们为大家介绍一个响应式流布局jQuery插件-Dylay,流布局我们前面介绍过很多,但这个流布局jQuery插件不同的是它的动画效果 ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
最新文章
- Ext.data.Connection
- matlab做交互作用图,MatlabMatlab工程应用案例精要.ppt
- 捋一捋js面向对象的继承问题
- Javascript实现导出word - jquery jquery.wordexport.js 实现导出word
- ML--HMM(隐马尔可夫模型及python的实现2)
- mysql增删改查语法
- 基于掷色子规则的c语言编程,掷骰子游戏-C语言
- Conda 的 yml 文件 Conda/PIP 国内镜像源的添加
- 大道至简(原标题:少是指数级的多)
- 解决IE11无法下载文件的问题
- Java NIO简介
- 一款科幻题材基地建设策略游戏——太空避难所中文版 附游戏玩法
- excel阅读器Android,Excel阅读器
- 实时即未来,车联网项目之电子围栏分析【六】
- java workflow jbpm_工作流(workflow)定义和jBPM
- tooth的用法_tooth的用法总结大全
- ff7重制版青魔法_FFV最终幻想7PC重制版攻略 第五十一章:大空洞
- Android Accessibility 安全性研究报告
- 九方智投李红红:新型储能方案推动锂电池迎来新商机
- 解决安卓/ios 键盘收回屏幕留白
热门文章
- C++程序设计【一】之 C++ 语言简介
- iOS开发:创建真机调试证书
- Java中的queue和deque对比详解
- 奖金(拓补排序的应用)
- Android实现按两次back键退出应用
- jquery判断toggle当前状态
- 发布中文搜索引擎数据库 TngouDB
- 实现开发板与ubuntu的共享--根文件系统NFS--Samba共享【sky原创】
- 2004年9月全国计算机等级考试二级C语言笔试试题及答案
- 如何解决uchome自带编辑器无法获取uchome编辑器里面的值问题?(uchome二次开发)...