转载地址:http://idream.iteye.com/blog/770887
是这样的,开始准备做一个美观点的后台页面,考虑使用EXTJs。可考虑到协议的问题,最终还是放弃了,继续使用jQuery吧。传统的后台页面布局是表格套表格,加上freamset已经ifream,当然也可以做到美观,可那是一个乱啊。下面介绍一个jQuery的插件,目前除了官方的英文文档,还没有发现可用的中文说明。用我极差的文笔在这里发表一下,希望大家不要介意。只是把自己的收获与大家分享一下。废话不多说,上正题!
首先,这个插件叫做: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引入后,其实就可以正常运行了,参见官方最简单的那个示例,如下:
- <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
- <script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
- <script src="js/jquery.layout-latest.js" type="text/javascript"></script>
- <SCRIPT type="text/javascript">
- $(document).ready(function () {
- $('body').layout({ applyDefaultStyles: true });
- });
- </SCRIPT>
- <DIV class="ui-layout-center">Center</DIV>
- <DIV class="ui-layout-north">North</DIV>
- <DIV class="ui-layout-south">South</DIV>
- <DIV class="ui-layout-east">East</DIV>
- <DIV class="ui-layout-west">West</DIV>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script> <script src="js/jquery.layout-latest.js" type="text/javascript"></script> <SCRIPT type="text/javascript"> $(document).ready(function () { $('body').layout({ applyDefaultStyles: true }); }); </SCRIPT> <DIV class="ui-layout-center">Center</DIV> <DIV class="ui-layout-north">North</DIV> <DIV class="ui-layout-south">South</DIV> <DIV class="ui-layout-east">East</DIV> <DIV class="ui-layout-west">West</DIV>
下面解释一下属性:
- $(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 = ""
- */
- }
- );
- });
$(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 */
- }
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 */
}
极大部分已经测试过了,参考官方示例中给出的css,地址:http://layout.jquery-dev.net/lib/css/layout-default-latest.css
时间原因,不能阐述太多了,本人英文水平很差,如有错误,请大家及时指正。