收藏

下载资源 加入VIP,免费下载

第1页 / 共11页

第2页 / 共11页

第3页 / 共11页

第4页 / 共11页

第5页 / 共11页

South

East

West

$（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:

"

red'>AAA",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。

需要加入默认css样式.ui-layout-toggler.content

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:

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*/

}

以上来自网络：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

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-west{

background:

#455d89;

border:

1pxsolid#BBB;

border-width:

0;

width:

5px;

}

/*

*拉动条拉动时，保持不动的拉动条样式，不明白修改背景测试。

*/

.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:

#435b87;

}

/*窗格关闭后，点击拉动条（非拉动条按钮）,窗格滑动时拉动条的样式*/

.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{

background:

url（images/westSplit.jpg）no-repeat;

}

/*

鼠标悬停在拉动条时的样式，已被.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{

color:

#66FFCC;

font-size:

12px;

font-weight:

bold;

width:

100%;

padding-bottom:

0.35ex;/*to'verticallycenter'textinsidetext-span*/

}

.ui-layout-resizer-west-open{background-color:

#435b87;}

.ui-layout-toggler-west-open{background:

url（images/westSplit.jpg）no-repeat;width:

5px;height:

35px;border:

none;}

.ui-layout-center{background-color:

#435b87;padding:

0px8px0px0px;}

.ui-layout-west{background-color:

#435b87;padding:

0px0px0px8px;}

.inner-center{background:

#f5f5f5;}

.inner-east{background:

#f5f5f5;}

.inner-south{background:

#f5f5f5;}

#main-layout.ui-layout-resizer-south-open{background:

#435b87;}

#main-layout.ui-layout-resizer-east-open{background:

#435b87;}

.ui-layout-resizer-east-closed{background:

#435b87;}

.ui-layout-resizer-south-closed{background:

#435b87;}

.ui-layout-toggler-south-open{background:

url（images/southSplit.jpg）no-repeat;border:

none;}

.ui-layout-toggler-south-closed{background:

url（images/southSplit.jpg）no-repeat;border:

none;}

varpageLayout;

$（document）.ready（function（）{

//createpagelayout

pageLayout=$（'body'）.layout（{

scrollToBookmarkOnLoad:

false//handledbycustomcodesocan'unhide'sectionfirst

defaults:

{

contentSelector:

".content"//innerdivtoauto-sizesoonlyitscrolls,nottheentirepane!

}

north:

{

size:

80

spacing_open:

0

closable:

false

resizable:

false

}

west:

{

size:

280

spacing_closed:

10

togglerLength_closed:

140

togglerAlign_closed:

"center"

//,togglerContent_closed:

"设

置"

togglerTip_closed:

"Open&PinContents"

sliderTip:

"SlideOpenContents"

slideTrigger_open:

"mouseover"

}

south:

{

size:

40

spacing_open:

0

closable:

false

resizable:

false

}

}）;

innerLayout=$（'#main-layout'）.layout（{

center__paneSelector:

".inner-center"

west__paneSelector: