jquery.layout.js常用属性

必须的文件是，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:\"

togglerContent_closed:\"\//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 */

}

以上来自网络：

• 灾害地图
• 灾害查询
• 数据统计

尊敬的用户，欢迎进入中国