1、jquerylayoutjs常用属性jQuery UI.Layout Plug-in 官方站点:http:/layout.jquery-必须的文件是,jquery.js,jquery-ui.js,还有就是这个插件的js。但在研究的过程中发现了一个问题,在官网下载的js是有问题的,甚至性能上都有问题。要下载官网示例中使用的js,切记。地址:http:/layout.jquery-把必要的js引入后,其实就可以正常运行了,参见官方最简单的那个示例,如下:$(document).ready(function () $(body).layout( applyDefaultStyles: true );
2、 ); CenterNorthSouthEastWest$(function() varmyLayout =$(body).layout( applyDefaultStyles: true,/应用默认样式scrollToBookmarkOnLoad:false,/页加载时滚动到标签showOverflowOnHover:false,/鼠标移过显示被隐藏的,只在禁用滚动条时用。 north_closable:false,/可以被关闭 north_resizable:false,/可以改变大小 north_size:50,/pane的大小 spacing_open:8,/边框的间隙 spacing
3、_closed:60,/关闭时边框的间隙resizerTip:可调整大小,/鼠标移到边框时,提示语/resizerCursor:resize-p 鼠标移上的指针样式 resizerDragOpacity:0.9,/调整大小边框移动时的透明度maskIframesOnResize:#ifa,/在改变大小的时候,标记iframe(未通过测试)sliderTip:显示/隐藏侧边栏,/在某个Pane隐藏后,当鼠标移到边框上显示的提示语。sliderCursor:pointer,/在某个Pane隐藏后,当鼠标移到边框上时的指针样式。 slideTrigger_open:dblclick,/在某个Pane
4、隐藏后,鼠标触发其显示的事件。(click, dblclick, mouseover) slideTrigger_close:click,/在某个Pane隐藏后,鼠标触发其关闭的事件。(click, mouseout) togglerTip_open:关闭,/pane打开时,当鼠标移动到边框上按钮上,显示的提示语togglerTip_closed:打开,/pane关闭时,当鼠标移动到边框上按钮上,显示的提示语 togglerLength_open:100,/pane打开时,边框按钮的长度 togglerLength_closed:200,/pane关闭时,边框按钮的长度hideTogglerO
5、nSlide:true,/在边框上隐藏打开/关闭按钮(测试未通过) togglerAlign_open:left,/pane打开时,边框按钮显示的位置togglerAlign_closed:right,/pane关闭时,边框按钮显示的位置togglerContent_open:AAA,/pane打开时,边框按钮中需要显示的内容可以是符号等。需要加入默认css样式.ui-layout-toggler .content togglerContent_closed:,/pane关闭时,同上。enableCursorHotkey:true,/启用快捷键CTRL或shift + 上下左右。customH
6、otkeyModifier: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
7、_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
8、: 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(东南西北中,
9、如: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;/*
10、非必备样式,描述窗格中的内容*/ .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/* *拖动拉动条时,拉动条的
11、样式,据说是设置“打开悬停”和“拖动”为同一样式。 */*.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;/*窗格关闭后,点击拉动条(非拉动条按钮),窗格滑动时拉动条的样式*/
12、 .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: alp
13、ha(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-t
14、oggler 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 */以上来自网络:无标题文档body font-family:宋体,Geneva, Arial, Helvetica, sans-serif; font-size
15、: 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
16、-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;/* * 所有拉动
17、条的样式 */.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-resiz
18、er-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);/*窗格关闭后,点击拉动
19、条(非拉动条按钮),窗格滑动时,鼠标悬停在拉动条上的样式*/ .ui-layout-resizer-sliding-hover opacity: 1.00; filter: alpha(opacity=100);/* * 拖动杆上的按钮 */.ui-layout-togglerbackground:url(images/westSplit.jpg) no-repeat;/* 鼠标悬停在拉动条时的样式,已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆盖了。 .ui-layout-resizer-hover */*鼠标
20、悬停在拖动条上按钮的样式*/ .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%;
21、 padding-bottom: 0.35ex;/* to vertically center text inside text-span */ .ui-layout-resizer-west-openbackground-color:#435b87; .ui-layout-toggler-west-openbackground:url(images/westSplit.jpg) no-repeat;width:5px; height:35px;border:none; .ui-layout-centerbackground-color:#435b87;padding:0px 8px 0px
22、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-openbackground:#435b87; #main-layout .ui-layout-resizer-east-openbackground:#435b87; .ui-la
23、yout-resizer-east-closedbackground:#435b87; .ui-layout-resizer-south-closedbackground:#435b87; .ui-layout-toggler-south-openbackground:url(images/southSplit.jpg) no-repeat;border:none; .ui-layout-toggler-south-closedbackground:url(images/southSplit.jpg) no-repeat;border:none;varpageLayout; $(documen
24、t).ready(function()/ create page layoutpageLayout = $(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:
25、 false , resizable: false , west: size: 280 , spacing_closed: 10 , togglerLength_closed: 140 , togglerAlign_closed: center/, togglerContent_closed: 设置 , 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:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1