網站前端_EasyUI.基礎入門.0008.帶你玩轉jQuery EasyUI Layout組件?

時間 2021-01-30

標籤 javascript css html java jquery git json ide 佈局欄目網站開發简体版

原文原文鏈接

簡單介紹:javascript

說明: ($.fn.layout)佈局,依賴panel和resizable,默認分爲5個區東east,西west,南south,北north,中center,中間的區域面板是必須的,邊緣區域面板是可選的,每一個邊緣區域面板可經過拖拽邊框調整尺寸,也能夠經過點擊摺疊觸發器來摺疊面板.佈局可嵌套,所以用戶可創建複雜的佈局.css

基礎用法:html

<div id="l" class="easyui-layout">
    <div data-options="region:'east',width:100,title:'east title'"></div>
    <div data-options="region:'west',width:200,title:'west title'"></div>
    <div data-options="region:'south',width:100,height:100,title:'south title'"></div>
    <div data-options="region:'north',width:100,height:100,title:'north title'"></div>
    <div data-options="region:'center',title:'center title'">
        <div id="ll" class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',title:'sub west title',width:200"></div>
            <div data-options="region:'center',title:'sub center title',collapsed:true"></div>
        </div>
    </div>           
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
</style>
<script type="text/javascript">
    var width = $(document).width();
    var height = $(document).height();
    $('#l').layout({
        width: width,
        height: height,
    });
</script>

佈局屬性:java

fit -> booleanjquery

說明: 當設置爲true時,就設置佈局的尺寸適應它的父容器,當在body標籤上建立佈局時,它將自動最大化到整個頁面的所有尺寸git

<body class="easyui-layout" data-options="fit:true">
    <div data-options="region:'east',width:100,title:'east title'"></div>
    <div data-options="region:'west',width:200,title:'west title'"></div>
    <div data-options="region:'south',width:100,height:100,title:'south title'"></div>
    <div data-options="region:'north',width:100,height:100,title:'north title'"></div>
    <div data-options="region:'center',title:'center title'">
        <div id="ll" class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',title:'sub west title',width:200"></div>
            <div data-options="region:'center',title:'sub center title',collapsed:true"></div>
        </div>
    </div>           
    <!-- 說明: 加載jquery-easyui腳本文件 -->
    <script src="js/jquery-easyui/jquery.min.js"></script>
    <script src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</body>

佈局接口:json

resize -> functionide

說明: 設置面板尺寸而且作佈局,須要傳入包含width/height/left/top的對象佈局

panel -> functionui

說明: 返回指定面板,須要傳遞region參數,參數支持north,south,east,west,center

collapse -> function

說明: 摺疊指定的面板,須要傳遞region參數,參數支持north,south,east,west,center

expand -> function

說明: 展開指定的面板,須要傳遞region參數,參數支持north,south,east,west,center

add -> function

說明: 添加一個指定的面板,options參數一個配置對象

remove -> function

說明: 移除指定的面板,須要傳遞region參數,參數支持north,south,east,west,center

<body class="easyui-layout" data-options="fit:true">
    <div data-options="region:'east',width:100,title:'east title'">
    </div>
    <div data-options="region:'west',width:200,title:'west title'"></div>
    <div data-options="region:'south',width:100,height:100,title:'south title'">
    </div>
    <div data-options="region:'north',width:100,height:100,title:'north title'">
        <div>
            <fieldset>
                <legend>操做區</legend>
                <a href="#" class="easyui-linkbutton" onclick="javascript:westLoad(this);">左側加載遠程數據</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript:westCollapse(this);">左側面板緩慢合併</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript:westExpand(this);">左側面板緩慢展開</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript:centerRemove(this);">刪除中間左邊面板</a>
                <a href="#" class="easyui-linkbutton" onclick="javascript:centerAdd(this);">添加中間左邊面板</a>
            </fieldset>
        </div>
    </div>
    <div data-options="region:'center',title:'center title'">
        <div id="ll" class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',title:'sub west title',width:200"></div>
            <div data-options="region:'center',title:'sub center title',collapsed:true"></div>
        </div>
    </div>           
    <!-- 說明: 加載jquery-easyui腳本文件 -->
    <script src="js/jquery-easyui/jquery.min.js"></script>
    <script src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        function westLoad(that) {
            var $wpanel = $('body').layout('panel', 'west');
            $wpanel.panel({
                extractor: function(data){
                    var h = '<ul>';
                    var d = JSON.parse(data);
                    for(var i=0; i<d['total']; i++){
                        h += '<li><a href="#">' + d['rows'][i]['name'] + '</a></li>'
                    };
                    h += '</ul>';
                    return h;
                },
            });
            $wpanel.panel('refresh', '/easyui/data.json');
        };
        function westCollapse(that){
            $('body').layout('collapse', 'west');
        };
        function westExpand(that){
            $('body').layout('expand', 'west');
        };
        function centerRemove(that){
            $('#ll').layout('remove', 'west');
        };
        function centerAdd(that){
            $('#ll').layout('add', {region:'west',title:'sub west title',width:200})
        };
    </script>
</body>

面板擴展:

title -> string

說明: 佈局面板的標題文本.

region -> string

說明: 定義佈局面板的位置,其值能夠爲north,south,east,west,center

border -> boolean

說明: 當設置爲true時,就顯示佈局面板的邊框

split -> boolean

說明: 當設置爲true時,就顯示拆分欄,用戶能夠改變面板的尺寸.

iconCls -> string

說明: 當面板頭部顯示一個圖表的css class

href -> string