Easyui几种布局方式的使用

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\',iconCls:\'icon-reload\',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\',iconCls:\'icon-reload\',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.创建嵌套layout

注意那个west panel的内部的布局是折叠的.

<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的,所有内部区域panel提供内置支持通过"URL"异步加载内容,使用异步加载技术,用户可以是他们的layout页面显示快了很多.

<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>