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>