JQuery UI Layout
来源：互联网 发布：windows截屏快捷键alt 编辑：程序博客网 时间：2024/05/20 06:51
来自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="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>
0 0
- JQuery UI Layout
- JQuery UI Layout
- jQuery UI Layout
- JQuery UI Layout
- jquery easy ui layout
- JQuery UI Layout
- JQUERY UI Layout
- JQuery UI Layout
- JQuery UI Layout配置说明
- jQuery UI.Layout 参数明细
- JQuery UI Layout
- jQuery UI Layout Plug-in 的使用
- jQuery布局插件UI Layout简介
- jQuery Easy UI Layout(布局)组件
- ui.layout
- jQuery Ui.Layout.js——PrintArea.js学习
- jQuery UI Layout Plug-in Tabs Demos 官方示例
- jQuery布局插件UI Layout简介及使用方法
- 快速排序算法小结
- RXJava
- Jmeter性能测试实战视频教程
- windows环境下安装JDK并配置环境变量
- Java多态
- JQuery UI Layout
- 如何设计一个 iOS 控件?(iOS 控件完全解析)
- 递归
- js将json转成树html
- 如何利用Ffmpeg进行视频截图
- JAVA中有关逆变和协变类型的详解
- C++在类内定义模板函数
- Thymeleaf
- 对于C++ Builder 使用DevPress 控件中的TCXGrid 添加复选框 在勾选时会闪退
