快捷導(dǎo)航

JQueryEasyUI Layout布局框架的使用

更新時間：2013年04月08日 10:43:28 作者：

本篇文章小編為大家介紹JQueryEasyUI Layout布局框架的使用，有需要的朋友可以參考一下

layout就是一個布局面板：

也就是布局的容器，有五個布局區(qū)域：北部，南部，東部，西部和中心。其中中心區(qū)域面板是必需的，但中心區(qū)域面板邊緣區(qū)域面板是可選的。通過拖動它的邊框，面板，可以調(diào)整每一個邊緣地區(qū)。可以嵌套的布局，以便用戶可以建立復(fù)雜的布局。

如果想要各個區(qū)域中的框架隨框架的大小改變，請嵌套到layout框架中；

復(fù)制代碼代碼如下:

<script type="text/javascript">
        //split屬性：如果設(shè)置為true將顯示一個分隔條，用戶可以拖動分隔條來改變布局面板的尺寸。
        //href屬性：在指定區(qū)域內(nèi)加載頁面的body中的部分，其他不加載
        //在panel框架中我們可以看到這樣一個正則選擇（可根據(jù)自己需求進行更改）：
        //        extractor: function (data) {
        //            var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
        //            var matches = pattern.exec(data);
        //            if (matches) {
        //                return matches[1]; // only extract body content
        //            } else {
        //                return data;
        //            }
        //        }
        //panel屬性：返回特定的布局面板，'region'參數(shù)的可取值為：'north','south','east','west','center'。
        function getPanel() {
            var southPanel = $("#layoutbody").layout('panel', 'south');
            //獲得panel的屬性 
            var attributes = southPanel.panel('options');
            console.info(attributes); //可以看到其中的各個屬性，瀏覽器調(diào)試，這里說明下：使用這種框架和使用js自己書寫前臺代碼，瀏覽器調(diào)試是必不可少的：火狐或者谷歌
        }
    </script>
</head>
<body id="layoutbody" class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
    </div>
    <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
        <input type="button" value="獲取panel" onclick="getPanel();" />
    </div>
    <div data-options="region:'center',title:'center title'" href="Index.htm" style="padding: 5px;
        background: #eee;">
        <input type="button" value="獲取panel" onclick="getPanel();" /><!--如果這里指定了href屬性，那么我們自己在這個部分寫的代碼將不會被現(xiàn)實-->
    </div>
</body>
</html>