本系列只列出一些常用的属性、事件或方法，具体完整知识请查看API文档

Panel（面板）

 
1. 通过标签创建面板
  1. <div id="p" class="easyui-panel" title="My Panel"     
    2. 

  2.         style="width:500px;height:150px;padding:10px;background:#fafafa;"   
    3. 

  3.         data-options="iconCls:'icon-save',closable:true,    
    4. 

  4.                 collapsible:true,minimizable:true,maximizable:true">   
    5. 

  5.     <p>panel content.</p>   
    6. 

  6.     <p>panel content.</p>   
    7. 

  7. </div>
2. 创建面板程序
  1. <div id="p" style="padding:10px;">    
    2. 

  2.     <p>panel content.</p>    
    3. 

  3.     <p>panel content.</p>    
    4. 

  4. </div>    
    5. 

  5.    
    6. 

  6. $('#p').panel({    
    7. 

  7.   width:500,    
    8. 

  8.   height:150,    
    9. 

  9.   title: 'My Panel',    
    10. 

  10.   tools: [{    
    11. 

  11.     iconCls:'icon-add',    
    12. 

  12.     handler:function(){alert('new')}    
    13. 

  13.   },{    
    14. 

  14.     iconCls:'icon-save',    
    15. 

  15.     handler:function(){alert('save')}    
    16. 

  16.   }]    
    17. 

  17. });

属性

属性名 属性值类型 描述 默认值
id string 面板的ID属性。 null
title string 在面板头部显示的标题文本。 null
iconCls string 设置一个16x16图标的CSS类ID显示在面板左上角。 null
width number 设置面板宽度。 auto
height number 设置面板高度。 auto
left number 设置面板距离左边的位置（即X轴位置）。 null
top number 设置面板距离顶部的位置（即Y轴位置）。 null
cls string 添加一个CSS类ID到面板。 null
headerCls string 添加一个CSS类ID到面板头部。 null
bodyCls string 添加一个CSS类ID到面板正文部分。 null
style object 添加一个当前指定样式到面板。

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

<div class="easyui-panel" style="width:200px;height:100px"

        data-options="style:{borderWidth:2}">

</div>
 {}
fit boolean 当设置为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
border boolean 定义是否显示面板边框。 true
doSize boolean 如果设置为true，在面板被创建的时候将重置大小和重新布局。 true
noheader boolean 如果设置为true，那么将不会创建面板标题。 false
content string 面板主体内容。 null
collapsible boolean 定义是否显示可折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
closable boolean 定义是否显示关闭按钮。 false
tools array,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="#" class="icon-add" onclick="javascript:alert('add')"></a>

	<a href="#" 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>
[]
collapsed boolean 定义是否在初始化的时候折叠面板。 false
minimized boolean 定义是否在初始化的时候最小化面板。 false
maximized boolean 定义是否在初始化的时候最大化面板。 false
closed boolean 定义是否在初始化的时候关闭面板。 false
href string 从URL读取远程数据并且显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的： 
<div id="pp" class="easyui-panel" style="width:300px;height:200px"

		data-options="href='get_content.php',closed:true">

</div>

<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache boolean 如果为true，在超链接载入时缓存面板内容。 true
loadingMessage string 在加载远程数据的时候在面板内显示一条消息。 Loading…
extractor function 定义如何从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. 

  2.     <div title="Tab1" style="padding:20px;display:none;">   
    3. 

  3.         tab1    
    4. 

  4.     </div>   
    5. 

  5.     <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
    6. 

  6.         tab2    
    7. 

  7.     </div>   
    8. 

  8.     <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
    9. 

  9.         tab3    
    10. 

  10.     </div>   
    11. 

  11. </div>
2. 通过Javascript创建选项卡
  1. $("#tabs-tt2").tabs({
    2. 

  2. 		width:600,
    3. 

  3. 		height:300,
    4. 

  4. 		//plain:true,
    5. 

  5. 		//fit:true,
    6. 

  6. 		//border:false,
    7. 

  7. 		//tabWidth:300,
    8. 

  8. 		scrollncrement:200,
    9. 

  9. 		scrollDuration:2000,
    10. 

  10. 		tools:[{
    11. 

  11. 			iconCls:'icon-add',
    12. 

  12. 			handler:function(){
    13. 

  13. 				alert('添加')				
    14. 

  14. 			}
    15. 

  15. 		},{
    16. 

  16. 			iconCls:'icon-cut',
    17. 

  17. 			handler:function(){
    18. 

  18. 				alert('裁剪')
    19. 

  19. 			}
    20. 

  20. 		}],
    21. 

  21. 		toolPosition:'right',
    22. 

  22. 		//tabPosition:'left',
    23. 

  23. 		//headerWidth:200,
    24. 

  24. 		//selected:2,
    25. 

  25. 		onSelect:function(title,index){
    26. 

  26. 			//alert('title:'+title+';index:'+index);
    27. 

  27. 		},
    28. 

  28. 		onContextMenu:function(e,title,index){
    29. 

  29. 			alert(e.type);
    30. 

  30. 		}		
    31. 

  31. 	});

属性

属性名 属性值类型 描述 默认值
width number 选项卡容器宽度。 auto
height number 选项卡容器高度。 auto
plain boolean 设置为true时，将不显示控制面板背景。 false
fit boolean 设置为true时，选项卡的大小将铺满它所在的容器。 false
border boolean 设置为true时，显示选项卡容器边框。 true
scrollIncrement number 选项卡滚动条每次滚动的像素值。 100
scrollDuration number 每次滚动动画持续的时间，单位：毫秒。 400
tools array,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="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>

	<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>

</div>
null
toolPosition string 工具栏位置。可用值：'left','right'。（该属性自1.3.2版开始可用） right
tabPosition string 选项卡位置。可用值：'top','bottom','left','right'。（该属性自1.3.2版开始可用） top
headerWidth number 选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。（该属性自1.3.2版开始可用） 150
tabWidth number 标签条的宽度。（该属性自1.3.4版开始可用） auto
tabHeight number 标签条的高度。（该属性自1.3.4版开始可用） 27
selected number 初始化选中一个tab页。（该属性自1.3.5版开始可用） 0
showHeader boolean 设置为true时，显示tab页标题。（该属性自1.3.5版开始可用） true

选项卡面板

 

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

属性名 属性值类型 描述 默认值
id string 选项卡面板的ID属性。 null
title string 选项卡面板的标题文本。
content string 选项卡面板的内容。
href string 从URL加载远程数据内容填充到选项卡面板。 null
cache boolean 如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。 true
iconCls string 定义了一个图标的CSS类ID显示到选项卡面板标题。 null
width number 选项卡面板宽度。 auto
height number 选项卡面板高度。 auto
collapsible boolean 如果为true，则允许选项卡摺叠。 false

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

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

添加新面板
  1. $("#tabs-tt2").tabs('add',{
    2. 

  2. 		id:'ddd',
    3. 

  3. 		title:'新的面板',
    4. 

  4. 		href:'test.php',
    5. 

  5. 		iconCls:'icon-add',
    6. 

  6. 		closable:true,		
    7. 

  7. 	});

Accordion（分类）

分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
通过标签创建分类，给<div/>标签添加一个名为'easyui-accordion'的类ID。
  1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    2. 

  2.     <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
    3. 

  3.         <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
    4. 

  4.         <p>Accordion is a part of easyui framework for jQuery.     
    5. 

  5.         It lets you define your accordion component on web page more easily.</p>   
    6. 

  6.     </div>   
    7. 

  7.     <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
    8. 

  8.         content2    
    9. 

  9.     </div>   
    10. 

  10.     <div title="Title3">   
    11. 

  11.         content3    
    12. 

  12.     </div>   
    13. 

  13. </div>

容器属性

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

面板属性

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

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

Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
 1. 通过标签创建布局，为<div/>标签增加名为'easyui-layout'的类ID。
 
  1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    2. 

  2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    3. 

  3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    4. 

  4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    5. 

  5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    6. 

  6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
    7. 

  7. </div>
2. 使用完整页面创建布局
  1. <body class="easyui-layout">   
    2. 

  2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    3. 

  3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    4. 

  4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    5. 

  5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    6. 

  6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
    7. 

  7. </body>
3. 创建嵌套布局
  1. <body class="easyui-layout">   
    2. 

  2.     <div data-options="region:'north'" style="height:100px"></div>   
    3. 

  3.     <div data-options="region:'center'">   
    4. 

  4.         <div class="easyui-layout" data-options="fit:true">   
    5. 

  5.             <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
    6. 

  6.             <div data-options="region:'center'"></div>   
    7. 

  7.         </div>   
    8. 

  8.     </div>   
    9. 

  9. </body>
4. 通过ajax读取内容
  1. <body class="easyui-layout">   
    2. 

  2.     <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>   
    3. 

  3.     <div data-options="region:'center',href:'center_content.php'" ></div>   
    4. 

  4. </body>

布局属性

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

区域面板属性

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

属性名 属性值类型 描述 默认值
title string 布局面板标题文本。 null
region string 定义布局面板位置，可用的值有：north, south, east, west, center。
border boolean 为true时显示布局面板边框。 true
split boolean 为true时用户可以通过分割栏改变面板大小。 false
iconCls string 一个包含图标的CSS类ID，该图标将会显示到面板标题上。 null
href string 用于读取远程站点数据的URL链接 null
collapsible boolean 定义是否显示折叠按钮。（该属性自1.3.3版开始可用） true
minWidth number 最小面板宽度。（该属性自1.3.3版开始可用） 10
minHeight number 最小面板高度。（该属性自1.3.3版开始可用） 10
maxWidth number 最大面板宽度。（该属性自1.3.3版开始可用） 10000
maxHeight number 最大面板高度。（该属性自1.3.3版开始可用） 10000

EasyUI笔记（二）Layout布局的更多相关文章

  1. easyui中datagrid+layout布局

    1.掌握layout布局 首先,layout布局的具体使用可参考官网http://www.jeasyui.net/plugins/162.html layout布局分为东南西北中五个区域,如图我们将其 ...

  2. Android Studio 学习笔记(二)：布局简介和xmlns说明

    初学Android Studio,是在b站看的教程视频,这里的笔记也是以其为基础的,个人强烈安利: [天哥]Android开发视频教程最新版 Android Studio开发 Android 布局简介 ...

  3. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  4. 使用easyui进行上左右布局

    在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架. 1.在页面中引入easyui所需的文件 1 &l ...

  5. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  6. Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  7. Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局

    一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...

  8. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  9. EasyUI之Layout布局和Tabs页签的使用

    1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...

  10. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

随机推荐

  1. C++ 自动类型推断

    C++语言提供了自动类型推断的机制,用于简化代码书写,这是一种很不错的特性,使用auto和decltype都可以完成自动类型推断的工作,而且都工作在编译期,这表示在运行时不会有任何的性能损耗. 一.a ...

  2. 了解EBP指针

    在寄存器里面有很多寄存器虽然他们的功能和使用没有任何的区别,但是在长期的编程和使用中,在程序员习惯中已经默认的给每个寄存器赋上了特殊的含义,比如:EAX一般用来做返回值,ECX用于记数等等.在win3 ...

  3. C# WinForm 使用SMS接口发送手机验证码+图形验证码+IP限制

    https://blog.csdn.net/IT_xiao_guang_guang/article/details/104299983 前言   1.发送手机验证码用的是网建的SMS接口(http:/ ...

  4. Codeforces_729_C

    http://codeforces.com/problemset/problem/729/C 二分找最小容量,然后找符合的最小花费. #include<iostream> #include ...

  5. java11类和对象

    import java.util.Scanner; public class jh_01_如何认识事物 { public static void main(String[] args) { Scann ...

  6. go net包简记

    TCP服务端 go语言中可以每次建立一次链接就创建一个goroutine去处理,使用goroutine实现并发非常方便和高效. TCP服务端程序的一般处理流程1.建立并绑定 Socket:首先服务端使 ...

  7. Go语言实现：【剑指offer】变态跳台阶

    该题目来源于牛客网<剑指offer>专题. 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 找规律: 1阶:1种: 2阶:2 ...

  8. Classmethod and Staticmethod - Python 类方法 和 静态方法

    classmethod and staticmethod classmethod 的是一个参数是类对象 cls (本类,或者子类), 而不是实例对象 instance (普通方法). classmet ...

  9. 集智学院 “Deep X：Deep Learning with Deep Knowledge”的公开讲座---总结

    人工智能旨在了解人类智能的本质,并创造出能模仿人类智能做出反应的智能机器,目前在一些领域已经取得显著的成功,如AI玩游戏.问答系统.自动驾驶.无人机.机器人.翻译.人脸识别.语音识别等领域.深度学习的 ...

  10. LVS 部署

    一.LVS的组成 LVS 由2部分程序组成,包括 ipvs 和 ipvsadm. 1. ipvs(ip virtual server):一段代码工作在内核空间,叫ipvs,是真正生效实现调度的代码.2 ...