JQuery UI Layout

絢爺好人圖書館 2013-12-06

展開全文

jQuery UI.Layout Plug-in 官方站點(diǎn)：http://layout./

必須的文件是，jquery.js，jquery-ui.js，還有就是這個(gè)插件的js。但在研究的過程中發(fā)現(xiàn)了一個(gè)問題，在官網(wǎng)下載的js是有問題的，甚至性能上都有問題。要下載官網(wǎng)示例中使用的js，切記。。地址：http://layout./lib/js/jquery.layout-latest.js

把必要的js引入后，其實(shí)就可以正常運(yùn)行了，參見官方最簡單的那個(gè)示例，如下：

<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,//應(yīng)用默認(rèn)樣式  
    scrollToBookmarkOnLoad:false,//頁加載時(shí)滾動(dòng)到標(biāo)簽  
    showOverflowOnHover:false,//鼠標(biāo)移過顯示被隱藏的，只在禁用滾動(dòng)條時(shí)用。  
    north__closable:false,//可以被關(guān)閉  
    north__resizable:false,//可以改變大小  
    north__size:50,//pane的大小  
    spacing_open:8,//邊框的間隙  
    spacing_closed:60,//關(guān)閉時(shí)邊框的間隙  
    resizerTip:"可調(diào)整大小",//鼠標(biāo)移到邊框時(shí)，提示語  
    //resizerCursor:"resize-p" 鼠標(biāo)移上的指針樣式  
    resizerDragOpacity:0.9,//調(diào)整大小邊框移動(dòng)時(shí)的透明度  
    maskIframesOnResize:"#ifa",//在改變大小的時(shí)候，標(biāo)記iframe（未通過測(cè)試）  
    sliderTip:"顯示/隱藏側(cè)邊欄",//在某個(gè)Pane隱藏后，當(dāng)鼠標(biāo)移到邊框上顯示的提示語。  
    sliderCursor:"pointer",//在某個(gè)Pane隱藏后，當(dāng)鼠標(biāo)移到邊框上時(shí)的指針樣式。  
    slideTrigger_open:"dblclick",//在某個(gè)Pane隱藏后，鼠標(biāo)觸發(fā)其顯示的事件。(click", "dblclick", "mouseover)  
    slideTrigger_close:"click",//在某個(gè)Pane隱藏后，鼠標(biāo)觸發(fā)其關(guān)閉的事件。("click", "mouseout")  
    togglerTip_open:"關(guān)閉",//pane打開時(shí)，當(dāng)鼠標(biāo)移動(dòng)到邊框上按鈕上，顯示的提示語  
    togglerTip_closed:"打開",//pane關(guān)閉時(shí)，當(dāng)鼠標(biāo)移動(dòng)到邊框上按鈕上，顯示的提示語  
    togglerLength_open:100,//pane打開時(shí)，邊框按鈕的長度  
    togglerLength_closed:200,//pane關(guān)閉時(shí)，邊框按鈕的長度  
    hideTogglerOnSlide:true,//在邊框上隱藏打開/關(guān)閉按鈕(測(cè)試未通過)  
    togglerAlign_open:"left",//pane打開時(shí)，邊框按鈕顯示的位置  
    togglerAlign_closed:"right",//pane關(guān)閉時(shí)，邊框按鈕顯示的位置  
    togglerContent_open:"<div style='background:red'>AAA</div>",//pane打開時(shí)，邊框按鈕中需要顯示的內(nèi)容可以是符號(hào)"<"等。需要加入默認(rèn)css樣式.ui-layout-toggler .content   
    togglerContent_closed:"<img/>",//pane關(guān)閉時(shí)，同上。  
    enableCursorHotkey:true,//啟用快捷鍵CTRL或shift + 上下左右。  
    customHotkeyModifier:"shift",//自定義快捷鍵控制鍵("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt  
    south__customHotkey:"shift+0",//自定義快捷鍵（測(cè)試未通過）  
    fxName:"drop",//打開關(guān)閉的動(dòng)畫效果  
    fxSpeed:"slow",//動(dòng)畫速度  
    //fxSettings: { duration: 500, easing: "bounceInOut" }//自定義動(dòng)畫設(shè)置(未通過測(cè)試)  
    //initClosed:true,//初始時(shí)，所有pane關(guān)閉  
    //initHidden:true //初始時(shí)，所有pane隱藏  
    onresize :ons,//調(diào)整大小時(shí)調(diào)用的函數(shù)  
    onshow_start:start,  
    onshow_end:end  
    /* 
    其他回調(diào)函數(shù) 
     
    顯示時(shí)調(diào)用 
    onshow = "" 
    onshow_start = ""  
    onshow_end = ""  
    隱藏時(shí)調(diào)用 
    onhide = ""  
    onhide_start = ""  
    onhide_end = ""  
    打開時(shí)調(diào)用 
    onopen = ""  
    onopen_start = ""  
    onopen_end = ""  
    關(guān)閉時(shí)調(diào)用 
    onclose = ""  
    onclose_start = ""  
    onclose_end = ""  
    改變大小時(shí)調(diào)用 
    onresize = ""  
    onresize_start = ""  
    onresize_end = ""  
    */  
}  
);  


});

如果不應(yīng)用默認(rèn)的樣式呢？也就是applyDefaultStyles: false（默認(rèn)）的時(shí)候。就需要一個(gè)css了，

body {  
     font-family: 宋體,Geneva, Arial, Helvetica, sans-serif;  
     font-size:   80%;  
     *font-size:  80%;  
 }  
   
 /*  
 三種必備樣式為：  
 paneClass:    "ui-layout-pane" 窗格樣式  
 resizerClass: "ui-layout-resizer" 拉動(dòng)條樣式  
 togglerClass: "ui-layout-toggler" 拉動(dòng)條上按鈕樣式  
 */  
   
 /*  
  所有窗格應(yīng)用的樣式,也是必備樣式  
 ui-layout-pane   
 ui-layout-pane-[PANE-NAME]（東南西北中，如：ui-layout-pane-west。這個(gè)樣式放入基本樣式下方，可覆蓋原樣式。 ）   
 ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打開時(shí)的樣式）  
 ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定東南西北中一個(gè)窗格在某狀態(tài)下的樣式。）  
 */  
 .ui-layout-pane {   
     background: #dfe8f6;  
     border:     0px solid #8db2e3;  
     padding:    10px;   
     overflow:   auto;  
 }  
     /*非必備樣式，描述窗格中的內(nèi)容*/  
     .ui-layout-content {  
         padding:    10px;  
         position:   relative;   
         overflow:   auto;  
     }  
   
 /*  
  *  所有拉動(dòng)條的樣式  
  */  
 .ui-layout-resizer  {   
     background:     #dfe8f6;  
     border:         1px solid #BBB;  
     border-width:   0;  
     }  
     /*  
      * 拉動(dòng)條拉動(dòng)時(shí)，保持不動(dòng)的拉動(dòng)條樣式，不明白修改背景測(cè)試。  
      */  
     .ui-layout-resizer-drag {  
     }  
       
     /*鼠標(biāo)移動(dòng)到拉動(dòng)條時(shí)的樣式*/  
     .ui-layout-resizer-hover{  
     }  
     /*   
      *拖動(dòng)拉動(dòng)條時(shí)，拉動(dòng)條的樣式，據(jù)說是設(shè)置“打開懸?！焙汀巴蟿?dòng)”為同一樣式。  
      */  
     /*.ui-layout-resizer-open-hover ,   */  
     .ui-layout-resizer-dragging {     
         background:#aaaaaa;  
     }  
   
     /*拖動(dòng)拉動(dòng)條時(shí)，到最大或最小邊緣時(shí)的樣式*/  
     .ui-layout-resizer-dragging-limit {  
         background: #E1A4A4; /* red */  
     }  
   
     /*拉動(dòng)條關(guān)閉時(shí)，的樣式。*/  
     .ui-layout-resizer-closed-hover {   
         background: #FFCC00;  
     }  
       
     /*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)拉動(dòng)條的樣式*/  
     .ui-layout-resizer-sliding {      
         opacity: .10;   
         filter:  alpha(opacity=10);  
         }  
         /*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)，鼠標(biāo)懸停在拉動(dòng)條上的樣式*/  
         .ui-layout-resizer-sliding-hover {  
             opacity: 1.00;   
             filter:  alpha(opacity=100);  
         }  
   
   
   
       
   
 /*  
  *  拖動(dòng)桿上的按鈕  
  */  
 .ui-layout-toggler {  
     border: 1px solid #CCCCCC;   
     background-color: #bcd2ef;  
     opacity: .60;  
     filter:  alpha(opacity=60);  
     }  
       
 /*  
     鼠標(biāo)懸停在拉動(dòng)條時(shí)的樣式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆蓋了。  
     .ui-layout-resizer-hover  
  */  
       
       
     /*鼠標(biāo)懸停在拖動(dòng)條上按鈕的樣式*/  
     .ui-layout-toggler-hover {  
         background-color: #0099FF；  
         opacity: 1.00;  
         filter:  alpha(opacity=100);  
     }  
       
     /*窗格關(guān)閉后，半打開狀態(tài)的拉動(dòng)條是隱藏的*/  
     .ui-layout-resizer-sliding  ui-layout-toggler {  
         display: none;  
     }  
   
   
 /*貌似是按鈕上的文字內(nèi)容*/  
     .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 */  
     }

以上來自網(wǎng)絡(luò)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</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" 拉動(dòng)條樣式   
togglerClass: "ui-layout-toggler" 拉動(dòng)條上按鈕樣式   
*/   
  
/*   
 所有窗格應(yīng)用的樣式,也是必備樣式   
ui-layout-pane    
ui-layout-pane-[PANE-NAME]（東南西北中，如：ui-layout-pane-west。這個(gè)樣式放入基本樣式下方，可覆蓋原樣式。 ）    
ui-layout-pane-[PANE-STATE] （open、closed 如：ui-layout-pane-open。窗格打開時(shí)的樣式）   
ui-layout-pane-[PANE-NAME]-[PANE-STATE] （如：ui-layout-pane-west-closed。指定東南西北中一個(gè)窗格在某狀態(tài)下的樣式。）   
*/   
.ui-layout-pane {    
    background: #dfe8f6;   
    border:     0px solid #8db2e3;   
    padding:    10px;    
    overflow:   auto;   
}   
    /*非必備樣式，描述窗格中的內(nèi)容*/   
    .ui-layout-content {   
        padding:    10px;   
        position:   relative;    
        overflow:   auto;   
    }   
  
/*   
 *  所有拉動(dòng)條的樣式   
 */   
.ui-layout-resizer-west{    
    background:     #455d89;   
    border:         1px solid #BBB;   
    border-width:   0;   
    width:5px;
    }   
    /*   
     * 拉動(dòng)條拉動(dòng)時(shí)，保持不動(dòng)的拉動(dòng)條樣式，不明白修改背景測(cè)試。   
     */   
    .ui-layout-resizer-drag {   
    }   
       
    /*鼠標(biāo)移動(dòng)到拉動(dòng)條時(shí)的樣式*/   
    .ui-layout-resizer-hover{   
    }   
    /*    
     *拖動(dòng)拉動(dòng)條時(shí)，拉動(dòng)條的樣式，據(jù)說是設(shè)置“打開懸停”和“拖動(dòng)”為同一樣式。   
     */   
    /*.ui-layout-resizer-open-hover ,   */   
    .ui-layout-resizer-dragging {      
        background:#aaaaaa;   
    }   
  
    /*拖動(dòng)拉動(dòng)條時(shí)，到最大或最小邊緣時(shí)的樣式*/   
    .ui-layout-resizer-dragging-limit {   
        background: #E1A4A4; /* red */   
    }   
  
    /*拉動(dòng)條關(guān)閉時(shí)，的樣式。*/   
    .ui-layout-resizer-closed-hover {    
        background: #435b87;   
    }   
       
    /*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)拉動(dòng)條的樣式*/   
    .ui-layout-resizer-sliding {       
        opacity: .10;    
        filter:  alpha(opacity=10);   
        }   
        /*窗格關(guān)閉后，點(diǎn)擊拉動(dòng)條（非拉動(dòng)條按鈕）,窗格滑動(dòng)時(shí)，鼠標(biāo)懸停在拉動(dòng)條上的樣式*/   
        .ui-layout-resizer-sliding-hover {   
            opacity: 1.00;    
            filter:  alpha(opacity=100);   
        }   
  
  
  
       
  
/*   
 *  拖動(dòng)桿上的按鈕   
 */   
.ui-layout-toggler {   
   background:url(images/westSplit.jpg) no-repeat;   

    }   
       
/*   
    鼠標(biāo)懸停在拉動(dòng)條時(shí)的樣式，已被.ui-layout-resizer-open-hover和.ui-layout-resizer-closed-hover覆蓋了。   
    .ui-layout-resizer-hover   
 */   
       
       
    /*鼠標(biāo)懸停在拖動(dòng)條上按鈕的樣式*/   
    .ui-layout-toggler-hover {   
        background-color: #0099FF；   
        opacity: 1.00;   
        filter:  alpha(opacity=100);   
    }   
       
    /*窗格關(guān)閉后，半打開狀態(tài)的拉動(dòng)條是隱藏的*/   
    .ui-layout-resizer-sliding  ui-layout-toggler {   
        display: none;   
    }   
  
  
/*貌似是按鈕上的文字內(nèi)容*/   
    .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:    "設(shè)<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="#">災(zāi)害地圖</a></li>
       <li><a href="#">災(zāi)害查詢</a></li>
       <li><a href="#">數(shù)據(jù)統(tǒng)計(jì)</a></li>
       </ul>
    </div>
    <div id="info">尊敬的用戶，歡迎進(jìn)入中國</div>
</div>
<DIV class="ui-layout-center">
       <div class="panlheader">
               <span><a>詳細(xì)信息</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>時(shí)間段選擇</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="高級(jí)" />
</div>
<div id="option">
</div>
</DIV> 
<DIV id="foot" class="ui-layout-south">South</DIV>    
</body>
</html>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：絢爺好人圖書館 > 《jquery 累覺不愛》

舉報(bào)/認(rèn)領(lǐng)