jquery.layout框架分割线

Posted 2020-06-14

css

<link href="${base}/res/common/css/jquery.layout/jquery.layout.css" rel="stylesheet" type="text/css">

js

<script type="text/javascript" src="${base}/res/common/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${base}/res/common/js/jquery.layout/jquery.ui.latest.js"></script>
<script type="text/javascript" src="${base}/res/common/js/jquery.layout/jquery.layout.1.4.4.js"></script>

<SCRIPT type="text/javascript">
/* left-menu-two start */
var myLayout;
$(document).ready(function () {
    /* $(‘body‘).layout(); */
    myLayout = $("body").layout({
        minSize:            25
    ,    north__size:        130
    ,    north__resizable:            false    // OVERRIDE the pane-default of ‘resizable=true‘
    ,    north__spacing_open:        0        // no resizer-bar when open (zero height)
    ,    west__size:            200
    ,    center__minHeight:    200
    ,    center__minWidth:    ‘30%‘
    ,    spacing_closed:        8
    ,    initClosed:            false
    ,    maskContents:        true // IMPORTANT - enable iframe masking - all panes in this case
    //,    onopen:                loadIframePage // same callback for ALL borderPanes
    ,    east__resizeWhileDragging: true    // slow with a page full of iframes!
    ,    east__initClosed:    true
    ,    south__initClosed:    true
    /*
    ,    west__initClosed:    false
    ,    west__maskIframesOnResize: false
    */
    });
});
/* left-menu-two stop */
</SCRIPT>

html

　　<div class="ui-layout-center">
        <iframe id="menuIframe" name="menuIframe" width="100%" height="100%"
            frameborder="0" src="v_child_list.do"></iframe>
    </div>
    <div class="ui-layout-west">
        <ul id="tree" class="ztree" style="overflow:auto;"></ul>
    </div>