JQuery UI Layout
来自http://www.cnblogs.com/chen-fan/articles/2044556.html
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 >
$( 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了，
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 */ }
以上来自网络：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > 无标题文档 </ title > < script type ="text/javascript" src ="js/jquery-1.5.1.min.js" ></ script > < script type ="text/javascript" src ="js/jquery-ui-1.8.12.custom.min.js" ></ script > < script type ="text/javascript" src ="js/jquery.layout-latest.js" ></ script > < link href ="css/main.css" rel ="stylesheet" type ="text/css" /> < link type ="text/css" href ="css/redmond/jquery-ui-1.8.12.custom.css" rel ="stylesheet" /> < style type ="text/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-west { background : #455d89 ; border : 1px solid #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-sliding ui-layout-toggler { display : none ; } /* 貌似是按钮上的文字内容 */ .ui-layout-toggler .content { color : #66FFCC ; font-size : 12px ; font-weight : bold ; width : 100% ; padding-bottom : 0.35ex ; /* to 'vertically center' text inside text-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 : 0px 8px 0px 0px ; } .ui-layout-west { background-color : #435b87 ; padding : 0px 0px 0px 8px ; } .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 ; } </ style > < script type ="text/javascript" > var pageLayout; $(document).ready( function (){ // create page layout pageLayout = $( ' body ' ).layout({ scrollToBookmarkOnLoad: false // handled by custom code so can 'unhide' section first , defaults: { contentSelector: " .content " // inner div to auto-size so only it scrolls, not the entire pane! } , north: { size: 80 , spacing_open: 0 , closable: false , resizable: false } , west: { size: 280 , spacing_closed: 10 , togglerLength_closed: 140 , togglerAlign_closed: " center " // , togglerContent_closed: "设<br><br>置" , togglerTip_closed: " Open & Pin Contents " , sliderTip: " Slide Open Contents " , slideTrigger_open: " mouseover " } , south: { size: 40 , spacing_open: 0 , closable: false , resizable: false } }); innerLayout = $( ' #main-layout ' ).layout({ center__paneSelector: " .inner-center " , west__paneSelector: " .inner-west " , east__paneSelector: " .inner-east " , south__paneSelector: " .inner-south " , west__size: 200 , east__size: 300 , south__size: 75 , spacing_open: 8 // ALL panes , spacing_closed: 8 // ALL panes , west__spacing_closed: 12 , east__spacing_closed: 12 }); $( " #topmenu li " ).mouseover( function (){ // alert($(this).attr("class")); if ($( this ).attr( " class " ) != " current " ) { if ( ! $( this ).hasClass( " hover " )) { $( this ).addClass( " hover " ); } } }); $( " #topmenu li " ).mouseout( function (){ if ($( this ).attr( " class " ) != " current " ) { if ($( this ).hasClass( " hover " )) { $( this ).removeClass( " hover " ); } } }); }); </ script > </ head > < body > < div id ="top" class ="ui-layout-north" > < div id ="logo" >< img src ="images/logo.jpg" width ="427" height ="52" /></ div > < div id ="topmenu" > < ul > < li class ="current" >< a href ="#" > 灾害地图 </ a ></ li > < li >< a href ="#" > 灾害查询 </ a ></ li > < li >< a href ="#" > 数据统计 </ a ></ li > </ ul > </ div > < div id ="info" > 尊敬的用户，欢迎进入中国 </ div > </ div > < DIV class ="ui-layout-center" > < div class ="panlheader" > < span >< a > 详细信息 </ a ></ span > </ div > < div id ="main-layout" class ="panelmain content" > < div class ="inner-center" > Inner Center </ div > < div class ="inner-east" > Inner East </ div > < div class ="inner-south" > Inner South </ div > </ div > </ DIV > < DIV class ="ui-layout-west" > < div class ="panlheader" > < span >< a > 时间段选择 </ a ></ span > </ div > < div class ="panelmain content" > </ div > < div id ="queryl" > < strong > 全文检索 </ strong >< br /> < input name ="input" type ="text" /> < input type ="button" value ="搜索" /> < input type ="button" value ="高级" /> </ div > < div id ="option" > </ div > </ DIV > < DIV id ="foot" class ="ui-layout-south" > South </ DIV > </ body > </ html >