【转】JQuery EasyUI layout 的基本使用

创建时间:2015/2/27 19:54:16
关键字:

原文链接:http://www.cnblogs.com/javaexam2/archive/2012/07/31/2632661.html

原文作者:java简单例子

 

layout是一个容器,它有5个区域:north(北)、south(南)、east(东)、west(西)、center(中),中间区域的panel是必须的,边区域panel是可选项,布局可以嵌套。

所有周边区域的panel可以通过拖动边框改变大小,他们也可以通过点击触发折叠事件折叠(collapse)。

创建layout

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

创建嵌套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>  

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

折叠Layout Panel

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