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引入后，其实就可以正常运行了，参见官方最简单的那个示例，如下：
<scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery-ui-1.8.4.custom.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.layout-latest.js"type="text/javascript"></script>
<SCRIPTtype="text/javascript">
$(document).ready(function(){
$('body').layout({applyDefaultStyles:true});
});
</SCRIPT>
<DIVclass="ui-layout-center">Center</DIV>
<DIVclass="ui-layout-north">North</DIV>
<DIVclass="ui-layout-south">South</DIV>
<DIVclass="ui-layout-east">East</DIV>
<DIV class="ui-layout-west">West</DIV>$(function(){
varmyLayout=$("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:"<divstyle='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:0pxsolid#8db2e3;
padding:10px;
overflow:auto;
}
/*非必备样式，描述窗格中的内容*/
.ui-layout-content{
padding:10px;
position:relative;
overflow:auto;
}
/*
*所有拉动条的样式
*/
.ui-layout-resizer{
background:#dfe8f6;
border:1pxsolid#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:1pxsolid#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-slidingui-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'verticallycenter'textinsidetext-span*/
}