《jquery.layout.js常用属性.docx》由会员分享，可在线阅读，更多相关《jquery.layout.js常用属性.docx（12页珍藏版）》请在金锄头文库上搜索。
1、jQuery UI.Layout Plug-in 官方站点：http:/layout.jquery- 必须的文件是，jquery.js，jquery-ui.js，还有就是这个插件的js。但在研究的过程中发现了一个问题，在官网下载的js是有问题的，甚至性能上都有问题。要下载官网示例中使用的js，切记。地址：http:/layout.jquery- $(document).ready(function () $(body).layout( applyDefaultStyles: true ); ); Center North South East West $(function() var myL
2、ayout =$(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:可调整大小,/鼠标移到边框
3、时，提示语 /resizerCursor:resize-p 鼠标移上的指针样式 resizerDragOpacity:0.9,/调整大小边框移动时的透明度 maskIframesOnResize:#ifa,/在改变大小的时候，标记iframe（未通过测试） sliderTip:显示/隐藏侧边栏,/在某个Pane隐藏后，当鼠标移到边框上显示的提示语。 sliderCursor:pointer,/在某个Pane隐藏后，当鼠标移到边框上时的指针样式。 slideTrigger_open:dblclick,/在某个Pane隐藏后，鼠标触发其显示的事件。(click, dblclick, mouseov
4、er) slideTrigger_close:click,/在某个Pane隐藏后，鼠标触发其关闭的事件。(click, mouseout) togglerTip_open:关闭,/pane打开时，当鼠标移动到边框上按钮上，显示的提示语 togglerTip_closed:打开,/pane关闭时，当鼠标移动到边框上按钮上，显示的提示语 togglerLength_open:100,/pane打开时，边框按钮的长度 togglerLength_closed:200,/pane关闭时，边框按钮的长度 hideTogglerOnSlide:true,/在边框上隐藏打开/关闭按钮(测试未通过) togg
5、lerAlign_open:left,/pane打开时，边框按钮显示的位置 togglerAlign_closed:right,/pane关闭时，边框按钮显示的位置 togglerContent_open:AAA,/pane打开时，边框按钮中需要显示的内容可以是符号等。需要加入默认css样式.ui-layout-toggler .content togglerContent_closed:,/pane关闭时，同上。 enableCursorHotkey:true,/启用快捷键CTRL或shift + 上下左右。 customHotkeyModifier:shift,/自定义快捷键控制键(CTR
6、L, 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
7、 /* 其他回调函数 显示时调用 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（默认）的时候。就需要一个c
8、ss了，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-p
9、ane-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 /* *拖动拉动条时，拉动条的样式，据说是设置“打开悬停”和“拖动”为同一样式。 */ /*.ui-layout-resizer-open-hover , */ .ui-layout-resizer-dragging background:#aaaaaa; /*拖动拉动条时，到最大或最小边缘时的样式*/ .ui-layout-resizer-dragging-limit background: #E1A4A4; /* red */ /*拉动条关闭时，的样式。*/ .ui-layout-resizer-clo
