jQuery布局插件UI Layout简介及使用方法

最新推荐文章于 2024-07-26 18:18:37 发布

猪脚踏浪

最新推荐文章于 2024-07-26 18:18:37 发布

阅读量3.6w

点赞数 6

分类专栏： javascript

本文链接：https://blog.csdn.net/zsg88/article/details/65445698

版权

javascript 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

UI Layout是一种基于jQuery的布局框架，项目主页http://layout.jquery-dev.net/。该框架的参考原型是ExtJS的border-layout，因此十分适用于将原有使用ExtJS的项目改造成jQuery项目。其核心是一个大小自适应的中心面板（必选），面板的上下左右四个方向可以放置可折叠、可缩放的面板（可选），各个面板可以添加任意数量的页眉和页脚面板。UI Layout支持内层布局的嵌套，任意块元素都可以当作布局的容器，最基本的布局容器是body。

注意提醒： jquery-layout最大只支持jquery-2.1.1， jquery3是不支持了。对jquery-1.11.1的支持最好，可以参考官网的大量例子。

参见官方最简单的一个i例子

<!DOCTYPE html>
<html>
<head>
	<title>Basic Layout Example</title>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="../source/stable/jquery.layout.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
		$("body").layout({ applyDemoStyles: true });
	});
	</script>

</head>
<body>

<div class="ui-layout-center">Center
	<p><a href="http://layout.jquery-dev.com/demos.cfm">Go to the Demos page</a></p>
	<p>* Pane-resizing is disabled because ui.draggable.js is not linked</p>
	<p>* Pane-animation is disabled because ui.effects.js is not linked</p>
</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>

</body>
</html>

参数的设置

$(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 = ""  
    */  
}  
);  


});

基本使用方法：获取容器元素并调用layout方法，传入配置参数（可选）options即可：
$('body').layout( [options] );通常保留布局的引用，以便于进一步通过代码控制布局的形态。

复制代码代码如下:

 
 var myLayout = $('body').layout();  
 
 // 读取布局配置选项  
 
 var is_west_resizable = myLayout.options.west.resizable;  
 
 var north_maxHeight = myLayout.options.north.maxSize;  
 
 // 调用布局函数  
 
 myLayout.toggle("north");  
 
 myLayout.sizePane("west", 300);  
 
 // 调用布局工具  
 
 myLayout.addPinBtn("#myPinButton", "west");  
 
 myLayout.allowOverflow("north");

所有面板基于现有的HTML元素，而面板的附属组件（缩放器和折叠开关）是自动生成的div元素，并且加上了对应的class属性。几乎所有的面板元素都必须是容器元素的直接子元素，form容器是一个例外。我们可以为相应的HTML元素赋予默认的类名，或者自定义的类名、id，来指定布局面板。下面举个直观的例子：

复制代码代码如下:

 
 $(document).ready(function() {  
 
 $("body").layout({  
 
 /*  
 
 east & west panes require 'ID' selectors  
 
 because they are 'nested inside a div'  
 
 */  
 
 west__paneSelector: "#west"  
 
 , east__paneSelector: "#east"  
 
 /*  
 
 north & south panes are 'children of body'  
 
 */  
 
 , north__paneSelector: ".ui-layout-north"//默认配置，可省略  
 
 , south__paneSelector: ".myclass-south"  
 
 /*  
 
 center pane is a 'child of the first form'  
 
 default-selector shown just for reference  
 
 */  
 
 , center__paneSelector: ".ui-layout-center"//默认配置，可省略  
 
 });  
 
 });

对应的页面：

复制代码代码如下:

 
 <body>  
 
 <!-- 'north' & 'south' are children of body -->  
 
 <div class="ui-layout-north">north</div>  
 
 <div class="myclass-south">south</div>  
 
 <!-- 'center' is nested inside a form -->  
 
 <form>  
 
 <div class="ui-layout-center">center</div>  
 
 </form>  
 
 <!-- 'east' & 'west' are nested inside a div -->  
 
 <div>  
 
 <div id="west">west</div>  
 
 <div id="east">east</div>  
 
 </div>  
 
 </body>

在本例中，布局容器是body，南、北面板是容器的直接子元素，南面板使用自定义类名“myclass-south”，需要在布局参数south__paneSelector中指定jQuery选择器；北面板使用默认类名“ui-layout-north”。东、西面板不是容器的直接子元素，需要指定id才能识别（不可以用类选择器），并且在布局参数“west__paneSelector”中指明对应的id。中心面板嵌套在form中，此时面板可以使用默认类名或自定义类名来识别。当一个面板满足下列两个条件时才可以使用自定义类选择器，否则只能用id选择器来识别：1、面板是form的直接子元素2、该form是容器的直接子元素，并且是容器中的第一个form。

面板之间的空隙构成了面板的边，边的概念是相对于上下左右方向的面板而言的，由于可以设置拖动面板的边实现对应面板的缩放，所以称这些边为“缩放器”；缩放器上面通常附加一个折叠开关负责面板的折叠与打开。当两个面板之间没有空隙时，缩放器和折叠开关随之消失。面板打开和折叠状态下，缩放器的宽度可以分别指定为不同的值。上例的效果图如下：

如果不应用默认的样式呢？也就是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>

猪脚踏浪

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
jQuery布局插件UI Layout简介及使用方法

UI Layout是一种基于jQuery的布局框架，项目主页http://layout.jquery-dev.net/。该框架的参考原型是ExtJS的border-layout，因此十分适用于将原有使用ExtJS的项目改造成jQuery项目。其核心是一个大小自适应的中心面板（必选），面板的上下左右四个方向可以放置可折叠、可缩放的面板（可选），各个面板可以添加任意数量的页眉和页脚面板。UI Layo
复制链接

扫一扫

专栏目录