jQuery EasyUI レイアウトプラグイン -Layout レイアウト

jQuery EasyUI プラグイン

依存関係

• panel
• resizable

使用法

レイアウト（Layout）の作成

1、マークアップでレイアウト（Layout）を作成します。

'easyui-layout' クラスを <div> タグに追加します。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <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',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2、ページ全体にレイアウト（Layout）を作成します。

<body 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',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3、ネストしたレイアウトを作成します。

内部レイアウトの西リージョンパネルが折りたたまれていることに注意してください。

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4、ajax でコンテンツを読み込みます。

レイアウト（layout）はパネル（panel）に基づいて作成されます。各リージョンパネルは、URL からコンテンツを動的に読み込む組み込みサポートを提供します。動的読み込み技術を使用することで、ユーザーはレイアウトページをより速く表示できます。

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

レイアウトパネルを折りたたむ（Collpase Layout Panel）

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

ツールボタンで西リージョンパネルを追加

$('#cc').layout('add',{
    region: 'west',
    width: 180,
    title: 'West Title',
    split: true,
    tools: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        iconCls:'icon-remove',
        handler:function(){alert('remove')}
    }]
});

レイアウトオプション（Layout Options）

リージョンパネルオプション（Region Panel Options）

リージョンパネルオプション（Region Panel Options）はパネル（panel）コンポーネント内で定義されます。以下は共通および追加のプロパティです：

メソッド

jQuery EasyUI プラグイン