jQuery UI.Layout 参数叨明 _Web前端

jQuery UI.Layout 参数说明

首先，这个插件叫做：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引入后，其实就可以正常运行了，参见官方最简单的那个示例，如下：

$(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了，献上我测试后的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?*/??
?????}?