当前位置:
首页 > 医药卫生 > jquerylayoutjs常用属性.docx
jquerylayoutjs常用属性.docx
- 文档编号:6536381
- 上传时间:2023-01-07
- 格式:DOCX
- 页数:11
- 大小:20.49KB
jquerylayoutjs常用属性.docx
《jquerylayoutjs常用属性.docx》由会员分享,可在线阅读,更多相关《jquerylayoutjs常用属性.docx(11页珍藏版)》请在冰豆网上搜索。
![jquerylayoutjs常用属性.docx](https://file1.bdocx.com/fileroot1/2023-1/7/3033789c-8156-4698-9949-f3d612e21f23/3033789c-8156-4698-9949-f3d612e21f231.gif)
jquerylayoutjs常用属性
jQueryUI.LayoutPlug-in 官方站点:
http:
//layout.jquery-
必须的文件是,jquery.js,jquery-ui.js,还有就是这个插件的js。
但在研究的过程中发现了一个问题,在官网下载的js是有问题的,甚至性能上都有问题。
要下载官网示例中使用的js,切记。
。
地址:
http:
//layout.jquery-
把必要的js引入后,其实就可以正常运行了,参见官方最简单的那个示例,如下:
$(document).ready(function(){
$('body').layout({applyDefaultStyles:
true});
});
Center
North
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: