JQuery布局插件UI layout的使用及说明

JQuery布局插件UI layout的使用及说明

UI layout 是一款主要针对于不同开发需求下的侧边栏插件，在他官方文档是首先对这款插件的定义是：
这个插件受extJS边框布局的启发，并将该功能重新创建为jQuery插件。UI布局插件可以创建您想要的任何UI外观—从简单的标题或边栏，到带有工具栏、菜单、帮助面板、状态栏、子窗体等的复杂应用程序。
将它与其他jqueryui小部件结合起来创建一个复杂的应用程序。没有任何限制或问题-这个小部件可以在生产中使用。

它在官网上的效果截图如下图：

可以看到它可以提供四个方向上的侧边栏，这些侧边栏都可以进行伸缩拖拽等，那么具体怎么使用呢，我将在在下文阐述。首先来看代码：

<div id="layoutWrapper" >
            <%-- 主体表格 --%>
            <div class="ui-layout-center">
               <%-- 中心布局 --%>
            </div>　
            <%--　扩展侧边栏　--%>
            <div class="ui-layout-east">
            <%--　右侧侧边栏　--%>
            </div>
        </div>

var mainLayout = $('#layoutWrapper').layout({
        center: {
          
        },
        east: {
            minSize: 600,
            size:600,
            togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语
            togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语
            resizerTip:"可调整大小",//鼠标移到边框时，提示语
            initClosed:true,//初始时，所有pane关闭
            maskIframesOnResize: "#ifa",//在改变大小的时候，标记iframe
            onopen_start: function () {
                //侧边栏打开时
            },
            onclose_start: function () {
                //侧边栏关闭时
            },
            onresize_end: function () {
                //调整侧边栏展开大小后
            }
        }
    });

上面两段代码就是我们会初始化一个中心布局和一个右侧侧边栏，并给右侧侧边栏加上我们想要的属性，其他方向上的侧边栏使用方法也是类似的。当然这个插件可以给我们改变的属性和方法还有很多，如果想要了解更多的话，建议大家阅读下方链接的博客，里面有更详细的解释。
jQuery布局插件UI Layout简介及使用方法

继续说回侧边栏的使用上，如果需要我们用代码控制侧边栏的展开和关闭，可以用如下代码：

mainLayout.close("east");
mainLayout.open("east");

这两行代码可以控制我们例子中右侧侧边栏的展开与关闭。

希望这篇文章能帮助到大家，如果大家想了解更多的UI layout的具体细节，可以阅读下他们的官方文档。
UI layout官方文档（英文）