首页 > 代码库 > easyUI中的layout

easyUI中的layout

2024-07-15 16:30:29   215人阅读

Layout

通过$.fn.layout.defaults可以重写Layout.

layout是一个具有五个区域的容器。只有中间区域面板是必须的，其余的都是边界面板。每一个边界面板都可以通过拖动它的边界来改变尺寸，还可以通过面板上的收缩\展开按钮来收缩或者展开面板。另外，layout还可以嵌套，因此我们可以用它来创建一个复杂的layout。


依赖

  • panel
  • resizable

使用 示例

创建Layout
1、添加一个‘easyui-layout‘的class来创建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',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、创建一个嵌套的Layout
<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'" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>
4、通过ajax来载入内容
<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 属性

NameTypeDescriptionDefault
fitboolean是否填充满父容器false

区域面板的属性

区域面板的很多选项都定义在panel组件中了，下面列出的是区域面板中增加的一些常用选项

NameTypeDescriptionDefault
titlestring区域面板的标题null
regionstring定义区域面板的位置，值域为: north, south, east, west, center. 
borderboolean是否显示边框true
splitboolean是否隔开两块区域面板，并可以resizefalse
iconClsstring显示在区域面板标题之前的图标null
hrefstringajax载入内容的地址null
collapsibleboolean是否显示收缩\展开按钮true
minWidthnumber区域面板的最小宽10
minHeightnumber区域面板的最小高10
maxWidthnumber区域面板的最大宽10000
maxHeightnumber区域面板的最大高10000

方法

NameParameterDescription
resizeparam设置layout的尺寸. ‘param‘有两个属性:width,height

代码举例:

$(‘#cc‘).layout(‘resize‘, {
	width:‘80%‘,
	height:300
})
panelregion返回指定的面板,参数取值可以是:‘north‘,‘south‘,‘east‘,‘west‘,‘center‘.
collapseregion收缩指定的面板, 参数取值可以是:‘north‘,‘south‘,‘east‘,‘west‘.
expandregion展开指定的面板,参数取值可以是, the ‘region‘ parameter possible values:‘north‘,‘south‘,‘east‘,‘west‘.
addoptions增加一块面板,options即为上面介绍的区域面板的属性
removeregion移除指定的面板, 参数取值可以是:‘north‘,‘south‘,‘east‘,‘west‘.


联系
我们