JQuery UI Layout
转载自 http://www.cnblogs.com/chen-fan/articles/2044556.html
jQuery UI.Layout Plug-in 官方站点:http://layout.jquery-dev.net/
必须的文件是,jquery.js,jquery-ui.js,还有就是这个插件的js。但在研究的过程中发现了一个问题,在官网下载的js是有问题的,甚至性能上都有问题。要下载官网示例中使用的js,切记。。地址:http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js
把必要的js引入后,其实就可以正常运行了,参见官方最简单的那个示例,如下:
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout-latest.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDefaultStyles: true });
});
</SCRIPT><DIV class="ui-layout-center">Center</DIV>
<DIV class="ui-layout-north">North</DIV>
<DIV class="ui-layout-south">South</DIV>
<DIV class="ui-layout-east">East</DIV>
<DIV class="ui-layout-west">West</DIV>
$(function(){
var myLayout =$("body").layout(
{ applyDefaultStyles: true,//应用默认样式 scrollToBookmarkOnLoad:false,//页加载时滚动到标签 showOverflowOnHover:false,//鼠标移过显示被隐藏的,只在禁用滚动条时用。 north__closable:false,//可以被关闭 north__resizable:false,//可以改变大小 north__size:50,//pane的大小 spacing_open:8,//边框的间隙 spacing_closed:60,//关闭时边框的间隙 resizerTip:"可调整大小",//鼠标移到边框时,提示语 //resizerCursor:"resize-p" 鼠标移上的指针样式 resizerDragOpacity:0.9,//调整大小边框移动时的透明度 maskIframesOnResize:"#ifa",//在改变大小的时候,标记iframe(未通过测试) sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后,当鼠标移到边框上显示的提示语。 sliderCursor:"pointer",//在某个Pane隐藏后,当鼠标移到边框上时的指针样式。 slideTrigger_open:"dblclick",//在某个Pane隐藏后,鼠标触发其显示的事件。(click", "dblclick", "mouseover) slideTrigger_close:"click",//在某个Pane隐藏后,鼠标触发其关闭的事件。("click", "mouseout") togglerTip_open:"关闭",//pane打开时,当鼠标移动到边框上按钮上,显示的提示语 togglerTip_closed:"打开",//pane关闭时,当鼠标移动到边框上按钮上,显示的提示语 togglerLength_open:100,//pane打开时,边框按钮的长度 togglerLength_closed:200,//pane关闭时,边框按钮的长度 hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过) togglerAlign_open:"left",//pane打开时,边框按钮显示的位置 togglerAlign_closed:"right",//pane关闭时,边框按钮显示的位置 togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时,边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content togglerContent_closed:"<img/>",//pane关闭时,同上。 enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。 customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt south__customHotkey:"shift+0",//自定义快捷键(测试未通过) fxName:"drop",//打开关闭的动画效果 fxSpeed:"slow",//动画速度 //fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试) //initClosed:true,//初始时,所有pane关闭 //initHidden:true //初始时,所有pane隐藏 onresize :ons,//调整大小时调用的函数 onshow_start:start, onshow_end:end /* 其他回调函数 显示时调用 onshow = "" onshow_start = "" onshow_end = "" 隐藏时调用 onhide = "" onhide_start = "" onhide_end = "" 打开时调用 onopen = "" onopen_start = "" onopen_end = "" 关闭时调用 onclose = "" onclose_start = "" onclose_end = "" 改变大小时调用 onresize = "" onresize_start = "" onresize_end = "" */
}
); });
如果不应用默认的样式呢?也就是applyDefaultStyles: false(默认)的时候。就需要一个css了,
body { font-family: 宋体,Geneva, Arial, Helvetica, sans-serif; font-size: 80%; *font-size: 80%; } /* 三种必备样式为: paneClass: "ui-layout-pane" 窗格样式 resizerClass: "ui-layout-resizer" 拉动条样式 togglerClass: "ui-layout-toggler" 拉动条上按钮样式 */ /* 所有窗格应用的样式,也是必备样式 ui-layout-pane ui-layout-pane-[PANE-NAME](东南西北中,如:ui-layout-pane-west。这个样式放入基本样式下方,可覆盖原样式。 ) ui-layout-pane-[PANE-STATE] (open、closed 如:ui-layout-pane-open。窗格打开时的样式) ui-layout-pane-[PANE-NAME]-[PANE-STATE] (如:ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。) */ .ui-layout-pane { background: #dfe8f6; border: 0px solid #8db2e3; padding: 10px; overflow: auto; } /*非必备样式,描述窗格中的内容*/ .ui-layout-content { padding: 10px; position: relative; overflow: auto; } /* * 所有拉动条的样式 */ .ui-layout-resizer { background: #dfe8f6; border: 1px solid #BBB; border-width: 0; } /* * 拉动条拉动时,保持不动的拉动条样式,不明白修改背景测试。 */ .ui-layout-resizer-drag { } /*鼠标移动到拉动条时的样式*/ .ui-layout-resizer-hover{ } /* *拖动拉动条时,拉动条的样式,据说是设置“打开悬停”和“拖动”为同一样式。 */ /*.ui-layout-resizer-open-hover , */ .ui-layout-resizer-dragging { background:#aaaaaa; } /*拖动拉动条时,到最大或最小边缘时的样式*/ .ui-layout-resizer-dragging-limit { background: #E1A4A4; /* red */ } /*拉动条关闭时,的样式。*/ .ui-layout-resizer-closed-hover { background: #FFCC00; } /*窗格关闭后,点击拉动条(非拉动条按钮),窗格滑动时拉动条的样式*/ .ui-layout-resizer-sliding { opacity: .10; filter: alpha(opacity=10); } /*窗格关闭后,点击拉动条(非拉动条按钮),窗格滑动时,鼠标悬停在拉动条上的样式*/ .ui-layout-resizer-sliding-hover { opacity: 1.00; filter: alpha(opacity=100); } /* * 拖动杆上的按钮 */ .ui-layout-toggler { border: 1px solid #CCCCCC; background-color: #bcd2ef; opacity: .60; filter: alpha(opacity=60); } /* 鼠标悬停在拉动条时的样式,已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。 .ui-layout-resizer-hover */ /*鼠标悬停在拖动条上按钮的样式*/ .ui-layout-toggler-hover { background-color: #0099FF; opacity: 1.00; filter: alpha(opacity=100); } /*窗格关闭后,半打开状态的拉动条是隐藏的*/ .ui-layout-resizer-sliding ui-layout-toggler { display: none; } /*貌似是按钮上的文字内容*/ .ui-layout-toggler .content { background:#FFFF00; color: #66FFCC; font-size: 12px; font-weight: bold; width: 100%; padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */ }
以上来自网络:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: 宋体,Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
*font-size: 80%;
}/*
三种必备样式为:
paneClass: "ui-layout-pane" 窗格样式
resizerClass: "ui-layout-resizer" 拉动条样式
togglerClass: "ui-layout-toggler" 拉动条上按钮样式
*//*
所有窗格应用的样式,也是必备样式
ui-layout-pane
ui-layout-pane-[PANE-NAME](东南西北中,如:ui-layout-pane-west。这个样式放入基本样式下方,可覆盖原样式。 )
ui-layout-pane-[PANE-STATE] (open、closed 如:ui-layout-pane-open。窗格打开时的样式)
ui-layout-pane-[PANE-NAME]-[PANE-STATE] (如:ui-layout-pane-west-closed。指定东南西北中一个窗格在某状态下的样式。)
*/
.ui-layout-pane {
background: #dfe8f6;
border: 0px solid #8db2e3;
padding: 10px;
overflow: auto;
}
/*非必备样式,描述窗格中的内容*/
.ui-layout-content {
padding: 10px;
position: relative;
overflow: auto;
}/*
* 所有拉动条的样式
*/
.ui-layout-resizer-west{
background: #455d89;
border: 1px solid #BBB;
border-width: 0;
width:5px;
}
/*
* 拉动条拉动时,保持不动的拉动条样式,不明白修改背景测试。
*/
.ui-layout-resizer-drag {
}/*鼠标移动到拉动条时的样式*/
.ui-layout-resizer-hover{
}
/*
*拖动拉动条时,拉动条的样式,据说是设置“打开悬停”和“拖动”为同一样式。
*/
/*.ui-layout-resizer-open-hover , */
.ui-layout-resizer-dragging {
background:#aaaaaa;
}/*拖动拉动条时,到最大或最小边缘时的样式*/
.ui-layout-resizer-dragging-limit {
background: #E1A4A4; /* red */
}/*拉动条关闭时,的样式。*/
.ui-layout-resizer-closed-hover {
background: #435b87;
}/*窗格关闭后,点击拉动条(非拉动条按钮),窗格滑动时拉动条的样式*/
.ui-layout-resizer-sliding {
opacity: .10;
filter: alpha(opacity=10);
}
/*窗格关闭后,点击拉动条(非拉动条按钮),窗格滑动时,鼠标悬停在拉动条上的样式*/
.ui-layout-resizer-sliding-hover {
opacity: 1.00;
filter: alpha(opacity=100);
}/*
* 拖动杆上的按钮
*/
.ui-layout-toggler {
background:url(images/westSplit.jpg) no-repeat;}/*
鼠标悬停在拉动条时的样式,已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。
.ui-layout-resizer-hover
*//*鼠标悬停在拖动条上按钮的样式*/
.ui-layout-toggler-hover {
background-color: #0099FF;
opacity: 1.00;
filter: alpha(opacity=100);
}/*窗格关闭后,半打开状态的拉动条是隐藏的*/
.ui-layout-resizer-sliding ui-layout-toggler {
display: none;
}/*貌似是按钮上的文字内容*/
.ui-layout-toggler .content {
color: #66FFCC;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
.ui-layout-resizer-west-open{background-color:#435b87;}
.ui-layout-toggler-west-open{background:url(images/westSplit.jpg) no-repeat;width:5px; height:35px; border:none;}
.ui-layout-center{background-color:#435b87;padding:0px 8px 0px 0px;}
.ui-layout-west{ background-color:#435b87; padding:0px 0px 0px 8px;}.inner-center{ background:#f5f5f5;}
.inner-east{ background:#f5f5f5;}
.inner-south{ background:#f5f5f5;}
#main-layout .ui-layout-resizer-south-open{background:#435b87;}
#main-layout .ui-layout-resizer-east-open{background:#435b87;}
.ui-layout-resizer-east-closed{background:#435b87;}
.ui-layout-resizer-south-closed{background:#435b87;}
.ui-layout-toggler-south-open{background:url(images/southSplit.jpg) no-repeat;border:none;}
.ui-layout-toggler-south-closed{background:url(images/southSplit.jpg) no-repeat; border:none;}</style>
<script type="text/javascript">
var pageLayout;$(document).ready(function(){
// create page layout
pageLayout = $('body').layout({
scrollToBookmarkOnLoad: false // handled by custom code so can 'unhide' section first
, defaults: {
contentSelector: ".content" // inner div to auto-size so only it scrolls, not the entire pane!
}
, north: {
size: 80
, spacing_open: 0
, closable: false
, resizable: false
}
, west: {
size: 280
, spacing_closed: 10
, togglerLength_closed: 140
, togglerAlign_closed: "center"
//, togglerContent_closed: "设<br><br>置"
, togglerTip_closed: "Open & Pin Contents"
, sliderTip: "Slide Open Contents"
, slideTrigger_open: "mouseover"
}
,
south: {
size: 40
, spacing_open: 0
, closable: false
, resizable: false
}
});innerLayout = $('#main-layout').layout({
center__paneSelector: ".inner-center"
, west__paneSelector: ".inner-west"
, east__paneSelector: ".inner-east"
, south__paneSelector: ".inner-south"
, west__size: 200
, east__size: 300
, south__size: 75
, spacing_open: 8 // ALL panes
, spacing_closed: 8 // ALL panes
, west__spacing_closed: 12
, east__spacing_closed: 12});$("#topmenu li").mouseover(function(){
//alert($(this).attr("class"));
if($(this).attr("class")!="current")
{
if(!$(this).hasClass("hover"))
{
$(this).addClass("hover");
}
}
});
$("#topmenu li").mouseout(function(){
if($(this).attr("class")!="current")
{
if($(this).hasClass("hover"))
{
$(this).removeClass("hover");
}
}
});
});
</script>
</head>
<body>
<div id="top" class="ui-layout-north">
<div id="logo"><img src="data:images/logo.jpg" width="427" height="52" /></div>
<div id="topmenu">
<ul>
<li class="current"><a href="#">灾害地图</a></li>
<li><a href="#">灾害查询</a></li>
<li><a href="#">数据统计</a></li>
</ul>
</div>
<div id="info">尊敬的用户,欢迎进入中国</div>
</div>
<DIV class="ui-layout-center">
<div class="panlheader">
<span><a>详细信息</a></span>
</div>
<div id="main-layout" class="panelmain content">
<div class="inner-center">Inner Center</div>
<div class="inner-east">Inner East</div>
<div class="inner-south">Inner South</div></div>
</DIV><DIV class="ui-layout-west"><div class="panlheader">
<span><a>时间段选择</a></span>
</div>
<div class="panelmain content">
</div>
<div id="queryl">
<strong>全文检索</strong><br />
<input name="input" type="text" />
<input type="button" value="搜索" />
<input type="button" value="高级" />
</div>
<div id="option">
</div>
</DIV>
<DIV id="foot" class="ui-layout-south">South</DIV>
</body>
</html>
JQuery UI Layout相关推荐
- jQuery UI.Layout
JQuey UI.Layout是一个类似Extjs中Layout的布局插件,看了其Demo,准备好好研究研究! 相关地址:http://layout.jquery-dev.net/index.cfm ...
- jQuery UI框架
1.jQuery的界面插件Ninja UI Ninja UI,是一款界面插件,使用它将能给你的项目增色不少.此插件包含有幻灯,智能提示等常见的效果. 目前的文档还不是很全,但是官方提供的例子已经很详细 ...
- 18款 jQuery UI框架
1.jQuery的界面插件 Ninja UI Query 是一个非常优秀的 JavaScript 框架,而且还有相当多的插件.其中的一些UI插件也相当的给力,比如 Ninja UI,是一款界面插件,使 ...
- jQuery布局插件UI Layout简介
UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...
- html面板插件ui,jQuery布局插件UI Layout简介及使用方法
UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...
- JQuery布局插件UI layout的使用及说明
JQuery布局插件UI layout的使用及说明 UI layout 是一款主要针对于不同开发需求下的侧边栏插件,在他官方文档是首先对这款插件的定义是: 这个插件受extJS边框布局的启发,并将该功 ...
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧:使用多个列
本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.17节,作者:[荷]Adriaan de Jonge , [美]Phil ...
- sap.ui.layout.HorizontalLayout is not a constructor
源代码: <!DOCTYPE html> <html> <head><meta http-equiv="X-UA-Compatible" ...
- jquery水平垂直居中_Java Web应用程序集成的jQuery UI选项卡(水平和垂直)示例
jquery水平垂直居中 jQuery UI is built on top of jQuery JavaScript Library to help web developers in creati ...
- jQuery插件 -- jQuery UI插件
jQuery UI 主要分为3个部分: 交互.微件和效果库 交互:这里都是一些与鼠标交互相关的内容.包括拖动(Draggable).置放(Doppable).缩放(Resizable).选择(Sele ...
最新文章
- Android自定义View基本步骤
- centos 7 安装nfs 服务
- Java数据结构和算法( 二 ) ## 数组
- ThinkPad L440 FN键设置
- python读取nc文件并转换成csv_Python提取netCDF数据并转换为csv文件
- How AET fields are retrieved from backend
- c# 弹性和瞬态故障处理库Polly
- 一周学会HTML----Day03常用标签(下)
- 干货集锦:200+生信范文、30+款软件、12类图片素材PPT,今年的SCI稳了!(附下载)...
- 获取字段_数据库中敏感字段的标记、标示
- matlab自带四旋翼算例asbQuadcopter使用心得
- ajax beforeSend中无效果
- css 精灵图的使用
- 分页组件change_javascript原生瀑布流+图片懒加载组件
- 替换Mac的home brew源
- 虚拟机vmware的完全卸载
- String的getBytes()方法
- Seraph‘s Last Stand(塞拉弗的最后一站)技能翻译
- 电脑版微信多开,安全不限制个数
- 粉丝时代,明星不需要公关?
热门文章
- 天线3db波束宽度_如何展开微带天线的波束宽度?
- android反编译修改教程,Android逆向反编译代码注入
- 使用pyecharts绘制图表
- javascript实现国密SM4
- javah生成java头文件
- 【JavaWeb开发】“web应用程序的根目录“与“web站点的根目录“的分析
- 《2020年度中国数据竞赛年鉴》发布!
- 美国 ZIP Code 一览表
- MATLAB 遗传算法求解约束优化问题
- 软考中级软件设计师--5面向对象基础