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>

posted on 2014-03-31 16:09 boonya 阅读(722) 评论(0) 编辑收藏举报