首页 > 代码库 > EasyUI笔记（一）Layout布局

EasyUI笔记（一）Layout布局

2024-10-18 04:27:39   210人阅读

Panel（面板）

技术分享
 
1. 通过标签创建面板
  1. <div id="p" class="easyui-panel" title="My Panel"     
  2.         style="width:500px;height:150px;padding:10px;background:#fafafa;"   
  3.         data-options="iconCls:‘icon-save‘,closable:true,    
  4.                 collapsible:true,minimizable:true,maximizable:true">   
  5.     <p>panel content.</p>   
  6.     <p>panel content.</p>   
  7. </div>
2. 创建面板程序
  1. <div id="p" style="padding:10px;">    
  2.     <p>panel content.</p>    
  3.     <p>panel content.</p>    
  4. </div>    
  5.    
  6. $(‘#p‘).panel({    
  7.   width:500,    
  8.   height:150,    
  9.   title: ‘My Panel‘,    
  10.   tools: [{    
  11.     iconCls:‘icon-add‘,    
  12.     handler:function(){alert(‘new‘)}    
  13.   },{    
  14.     iconCls:‘icon-save‘,    
  15.     handler:function(){alert(‘save‘)}    
  16.   }]    
  17. });

属性

属性名属性值类型描述默认值
idstring面板的ID属性。null
titlestring在面板头部显示的标题文本。null
iconClsstring设置一个16x16图标的CSS类ID显示在面板左上角。null
widthnumber设置面板宽度。auto
heightnumber设置面板高度。auto
leftnumber设置面板距离左边的位置（即X轴位置）。null
topnumber设置面板距离顶部的位置（即Y轴位置）。null
clsstring添加一个CSS类ID到面板。null
headerClsstring添加一个CSS类ID到面板头部。null
bodyClsstring添加一个CSS类ID到面板正文部分。null
styleobject添加一个当前指定样式到面板。

如下代码示例更改面板边框宽度：

<div class="easyui-panel" style="width:200px;height:100px"        data-options="style:{borderWidth:2}"></div>
{}
fitboolean当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。 
<div style="width:200px;height:100px;padding:5px">	<div class="easyui-panel" style="width:200px;height:100px"			data-options="fit:true,border:false">		Embedded Panel	</div></div>
false
borderboolean定义是否显示面板边框。true
doSizeboolean如果设置为true，在面板被创建的时候将重置大小和重新布局。true
noheaderboolean如果设置为true，那么将不会创建面板标题。false
contentstring面板主体内容。null
collapsibleboolean定义是否显示可折叠按钮。false
minimizableboolean定义是否显示最小化按钮。false
maximizableboolean定义是否显示最大化按钮。false
closableboolean定义是否显示关闭按钮。false
toolsarray,selector自定义工具菜单，可用值：
1) 数组，每个元素都包含‘iconCls‘和‘handler‘属性。
2) 指向工具菜单的选择器。

面板工具菜单可以声明在已经存在的<div>标签上：

<div class="easyui-panel" style="width:300px;height:200px"		title="My Panel" data-options="iconCls:‘icon-ok‘,tools:‘#tt‘"></div><div id="tt">	<a href="http://www.mamicode.com/#" class="icon-add" onclick="javascript:alert(‘add‘)"></a>	<a href="http://www.mamicode.com/#" class="icon-edit" onclick="javascript:alert(‘edit‘)"></a></div>

面板工具菜单也可以通过数组定义：

<div class="easyui-panel" style="width:300px;height:200px"		title="My Panel" data-options="iconCls:‘icon-ok‘,tools:[				{					iconCls:‘icon-add‘,					handler:function(){alert(‘add‘)}				},{					iconCls:‘icon-edit‘,					handler:function(){alert(‘edit‘)}				}]"></div>
[]
collapsedboolean定义是否在初始化的时候折叠面板。false
minimizedboolean定义是否在初始化的时候最小化面板。false
maximizedboolean定义是否在初始化的时候最大化面板。false
closedboolean定义是否在初始化的时候关闭面板。false
hrefstring从URL读取远程数据并且显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的： 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"		data-options="href=http://www.mamicode.com/‘get_content.php‘,closed:true"></div><a href="http://www.mamicode.com/#" onclick="javascript:$(‘#pp‘).panel(‘open‘)">Open</a>
null
cacheboolean如果为true，在超链接载入时缓存面板内容。true
loadingMessagestring在加载远程数据的时候在面板内显示一条消息。Loading…
extractorfunction定义如何从ajax应答数据中提取内容，返回提取数据。
extractor: function(data){	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;	var matches = pattern.exec(data);	if (matches){		return matches[1];	// 仅提取主体内容	} else {		return data;	}}

Tabs（选项卡）

技术分享
1. 通过标签创建选项卡
通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID‘easyui-tabs‘。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。
  1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
  2.     <div title="Tab1" style="padding:20px;display:none;">   
  3.         tab1    
  4.     </div>   
  5.     <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
  6.         tab2    
  7.     </div>   
  8.     <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;">   
  9.         tab3    
  10.     </div>   
  11. </div>
2. 通过Javascript创建选项卡
  1. $("#tabs-tt2").tabs({
  2. 		width:600,
  3. 		height:300,
  4. 		//plain:true,
  5. 		//fit:true,
  6. 		//border:false,
  7. 		//tabWidth:300,
  8. 		scrollncrement:200,
  9. 		scrollDuration:2000,
  10. 		tools:[{
  11. 			iconCls:‘icon-add‘,
  12. 			handler:function(){
  13. 				alert(‘添加‘)				
  14. 			}
  15. 		},{
  16. 			iconCls:‘icon-cut‘,
  17. 			handler:function(){
  18. 				alert(‘裁剪‘)
  19. 			}
  20. 		}],
  21. 		toolPosition:‘right‘,
  22. 		//tabPosition:‘left‘,
  23. 		//headerWidth:200,
  24. 		//selected:2,
  25. 		onSelect:function(title,index){
  26. 			//alert(‘title:‘+title+‘;index:‘+index);
  27. 		},
  28. 		onContextMenu:function(e,title,index){
  29. 			alert(e.type);
  30. 		}		
  31. 	});

属性

属性名属性值类型描述默认值
widthnumber选项卡容器宽度。auto
heightnumber选项卡容器高度。auto
plainboolean设置为true时，将不显示控制面板背景。false
fitboolean设置为true时，选项卡的大小将铺满它所在的容器。false
borderboolean设置为true时，显示选项卡容器边框。true
scrollIncrementnumber选项卡滚动条每次滚动的像素值。100
scrollDurationnumber每次滚动动画持续的时间，单位：毫秒。400
toolsarray,selector工具栏添加在选项卡面板头的左侧或右侧。可用的值有：
1. 一个工具菜单数组，每个工具选项都和linkbutton相同。
2. 一个指向<div/>容器工具菜单的选择器。

代码示例： 

通过数组定义工具菜单。

$(‘#tt‘).tabs({	tools:[{		iconCls:‘icon-add‘,		handler:function(){			alert(‘添加‘)		}	},{		iconCls:‘icon-save‘,		handler:function(){			alert(‘保存‘)		}	}]});

通过存在的DOM容器定义工具菜单。

$(‘#tt‘).tabs({	tools:‘#tab-tools‘});<div id="tab-tools">	<a href="http://www.mamicode.com/#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>	<a href="http://www.mamicode.com/#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a></div>
null
toolPositionstring工具栏位置。可用值：‘left‘,‘right‘。（该属性自1.3.2版开始可用）right
tabPositionstring选项卡位置。可用值：‘top‘,‘bottom‘,‘left‘,‘right‘。（该属性自1.3.2版开始可用）top
headerWidthnumber选项卡标题宽度，在tabPosition属性设置为‘left‘或‘right‘的时候才有效。（该属性自1.3.2版开始可用）150
tabWidthnumber标签条的宽度。（该属性自1.3.4版开始可用）auto
tabHeightnumber标签条的高度。（该属性自1.3.4版开始可用）27
selectednumber初始化选中一个tab页。（该属性自1.3.5版开始可用）0
showHeaderboolean设置为true时，显示tab页标题。（该属性自1.3.5版开始可用）true

选项卡面板

 

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名属性值类型描述默认值
idstring选项卡面板的ID属性。null
titlestring选项卡面板的标题文本。
contentstring选项卡面板的内容。
hrefstring从URL加载远程数据内容填充到选项卡面板。null
cacheboolean如果为true，在‘href‘属性设置了有效值的时候缓存选项卡面板。true
iconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题。null
widthnumber选项卡面板宽度。auto
heightnumber选项卡面板高度。auto
collapsibleboolean如果为true，则允许选项卡摺叠。false

下面的是选项卡面板新增且独有的属性。

属性名属性值类型描述默认值
closableboolean在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。false
selectedboolean在设置为true的时候，选项卡面板会被选中。false

添加新面板

  1. $("#tabs-tt2").tabs(‘add‘,{
  2. 		id:‘ddd‘,
  3. 		title:‘新的面板‘,
  4. 		href:‘test.php‘,
  5. 		iconCls:‘icon-add‘,
  6. 		closable:true,		
  7. 	});

Accordion（分类）

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的‘href‘属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
技术分享
通过标签创建分类，给<div/>标签添加一个名为‘easyui-accordion‘的类ID。
  1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
  2.     <div title="Title1" data-options="iconCls:‘icon-save‘" style="overflow:auto;padding:10px;">   
  3.         <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
  4.         <p>Accordion is a part of easyui framework for jQuery.     
  5.         It lets you define your accordion component on web page more easily.</p>   
  6.     </div>   
  7.     <div title="Title2" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">   
  8.         content2    
  9.     </div>   
  10.     <div title="Title3">   
  11.         content3    
  12.     </div>   
  13. </div>

容器属性

属性名属性值类型描述默认值
widthnumber分类容器的宽度。auto
heightnumber分类容器的高度。auto
fitboolean如果设置为true，分类容器大小将自适应父容器。false
borderboolean定义是否显示边框。true
animateboolean定义在展开和折叠的时候是否显示动画效果。true
multipleboolean如果为true时，同时展开多个面板。（该属性自1.3.5版开始可用） false
selectednumber设置初始化时默认选中的面板索引号。（该属性自1.3.5版开始可用） 0

 

面板属性

分类面板属性继承自panel(面板)，分类面板新增的属性如下：

属性名属性值类型描述默认值
selectedboolean如果设置为true将展开面板。false
collapsibleboolean如果设置为true将显示折叠按钮。true

Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
技术分享
 1. 通过标签创建布局，为<div/>标签增加名为‘easyui-layout‘的类ID。
 
  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
  2.     <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>   
  3.     <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>   
  4.     <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>   
  5.     <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>   
  6.     <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>   
  7. </div>
2. 使用完整页面创建布局
  1. <body class="easyui-layout">   
  2.     <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>   
  3.     <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>   
  4.     <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>   
  5.     <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>   
  6.     <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>   
  7. </body>
3. 创建嵌套布局
  1. <body class="easyui-layout">   
  2.     <div data-options="region:‘north‘" style="height:100px"></div>   
  3.     <div data-options="region:‘center‘">   
  4.         <div class="easyui-layout" data-options="fit:true">   
  5.             <div data-options="region:‘west‘,collapsed:true" style="width:180px"></div>   
  6.             <div data-options="region:‘center‘"></div>   
  7.         </div>   
  8.     </div>   
  9. </body>
4. 通过ajax读取内容
  1. <body class="easyui-layout">   
  2.     <div data-options="region:‘west‘,href:‘west_content.php‘" style="width:180px" ></div>   
  3.     <div data-options="region:‘center‘,href:‘center_content.php‘" ></div>   
  4. </body>

布局属性

属性名属性值类型描述默认值
fitboolean如果设置为true，布局组件将自适应父容器。当使用‘body‘标签创建布局的时候，整个页面会自动最大。false

 

区域面板属性

区域面板属性定义与panel组件类似，下面的是公共的和新增的属性：

属性名属性值类型描述默认值
titlestring布局面板标题文本。null
regionstring定义布局面板位置，可用的值有：north, south, east, west, center。
borderboolean为true时显示布局面板边框。true
splitboolean为true时用户可以通过分割栏改变面板大小。false
iconClsstring一个包含图标的CSS类ID，该图标将会显示到面板标题上。null
hrefstring用于读取远程站点数据的URL链接null
collapsibleboolean定义是否显示折叠按钮。（该属性自1.3.3版开始可用）true
minWidthnumber最小面板宽度。（该属性自1.3.3版开始可用）10
minHeightnumber最小面板高度。（该属性自1.3.3版开始可用）10
maxWidthnumber最大面板宽度。（该属性自1.3.3版开始可用）10000
maxHeightnumber最大面板高度。（该属性自1.3.3版开始可用）10000


实例代码下载

EasyUI笔记（一）Layout布局


联系
我们