EasyUI笔记（一）Base基础

总结：

1）每个UI都是通过属性、事件和方法运作的

2）用JS加载时只需传入一个参数（用大括号{}包围），包含若干个键值对，之间用逗号隔开；

3）事件也是写在JS加载时的方法中，也是键值对形式，值是匿名函数；

4）方法写在JS加载后或事件中，用于获取或设置对象属性。

5）加载UI组件的2种方法：1.使用class方式加载；2.使用js调用加载

用JS加载，要记得加上这几个文件，少了css文件就无法渲染出效果来哦。

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

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

Base基础

---

1.Draggable（拖动）

通过标签创建一个可拖动的元素。

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">    
<div id="title" style="background:#ccc;">title</div>
</div>

使用Javascript创建一个可拖动的元素。

<div id="dd" style="width:100px;height:100px;"> 
<div id="title" style="background:#ccc;">title</div> 
</div>

$('#dd').draggable({ 
handle:'#title' 
}); 

属性

属性名	属性值类型	描述	默认值
proxy	string,function	在拖动的时候使用的代理元素，当使用'clone'的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。 下面的例子显示了如何创建一个简单的代理对象。 $('.dragitem').draggable({ proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } });	null
revert	boolean	如果设置为true，在拖动停止时元素将返回起始位置。	false
cursor	string	拖动时的CSS指针样式。	move
deltaX	number	被拖动的元素对应于当前光标位置x。	null
deltaY	number	被拖动的元素对应于当前光标位置y。	null
handle	selector	开始拖动的句柄。	null
disabled	boolean	如果设置为true，则停止拖动。	false
edge	number	可以在其中拖动的容器的宽度。	0
axis	string	定义元素移动的轴向，可用值有：'v'或'h'，当没有设置或设置为null时可同时在水平和垂直方向上拖动。	null

2.Droppable（放置）

通过标签创建一个放置区。

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;">
</div> 

使用Javascript创建一个放置区。

<div id="dd" style="width:100px;height:100px;"></div> 

$('#dd').droppable({ 
accept:'#d1,#d3' 
}); 

属性

属性名	属性值类型	描述	默认值
accept	selector	确定哪些可拖拽元素将被接受。	null
disabled	boolean	如果为true，则禁止放置。	false

事件

事件名	事件参数	描述
onDragEnter	e,source	在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
onDragOver	e,source	在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。
onDragLeave	e,source	在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
onDrop	e,source	在被拖拽元素放入到放置区的时候触发，source参数表示被拖拽的DOM元素。

3.Resizable（调整大小）

使用标签创建可变大小的窗口。

<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">
</div> 

使用Javascript创建可变大小的窗口。

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> 

$('#rr').resizable({ 
maxWidth:800, 
maxHeight:600 
}); 

属性

属性名	属性值类型	描述	默认值
disabled	boolean	如果为true，则禁用大小调整。	false
handles	string	声明调整方位,'n'=北,'e'=东,'s'=南等。	n, e, s, w, ne, se, sw, nw, all
minWidth	number	当调整大小时候的最小宽度。	10
minHeight	number	当调整大小时候的最小高度。	10
maxWidth	number	当调整大小时候的最大宽度。	10000
maxHeight	number	当调整大小时候的最大高度。	10000
edge	number	边框边缘大小。	5

 

 

 

 

 

 

 

 

 4.Tooltip（提示框）

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

 通过标签创建提示框，给元素添加一个"easyui-tooltip"的类名，无需任何Javascript代码。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

通过Javascript创建提示框。

<a id="dd" href="javascript:void(0)">Click here</a>

$('#dd').tooltip({    
	position: 'right',    
	content: '<span style="color:#fff">This is the tooltip message.</span>',    
	onShow: function(){        
		$(this).tooltip('tip').css({            
		backgroundColor: '#666',            
		borderColor: '#666'        
	});   
 }});

属性

属性名	属性值类型	描述	默认值
position	string	消息框位置。可用值有："left","right","top","bottom"	bottom
content	string	消息框内容。	null
trackMouse	boolean	为true时，允许提示框跟着鼠标移动。	false
deltaX	number	水平方向提示框的位置。	0
deltaY	number	垂直方向提示框的位置。	0
showEvent	string	当激发什么事件的时候显示提示框。	mouseenter
hideEvent	string	当激发什么事件的时候隐藏提示框。	mouseleave
showDelay	number	延时多少秒显示提示框。	200
hideDelay	number	延时多少秒隐藏提示框。	100

5.LinkButton（按钮）

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

 

使用标签创建按钮更加简单。

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

也可以使用Javascript创建按钮。

<a id="btn" href="#">easyui</a>    
$('#btn').linkbutton({    
    iconCls: 'icon-search'   
}); 

属性

属性名	属性值类型	描述	默认值
id	string	组件的ID属性。	null
disabled	boolean	为true时禁用按钮。	false
toggle	boolean	为true时允许用户切换其状态是被选中还是未选择，可实现checkbox复选效果。（该属性自1.3.3版开始可用）	false
selected	boolean	定义按钮初始的选择状态，true为被选中，false为未选中。（该属性自1.3.3版开始可用）	false
group	string	指定相同组名称的按钮同属于一个组，可实现radio单选效果。（该属性自1.3.3版开始可用）	null
plain	boolean	为true时显示简洁效果。	false
text	string	按钮文字。	''
iconCls	string	显示在按钮文字左侧的图标(16x16)的CSS类ID。	null
iconAlign	string	按钮图标位置。可用值有：'left','right'。（该属性自1.3.2版开始可用）	left

6.ProgressBar（进度条）

使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加'easyui-progressbar'类ID到<div/>标签。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div> 

使用Javascript创建进度条。

<div id="p" style="width:400px;"></div> 

$('#p').progressbar({ 
value: 60 
}); 

获取当前值和设置一个新的值到进度条控件。

var value = $('#p').progressbar('getValue'); 
if (value < 100){ 
value += Math.floor(Math.random() * 10); 
$('#p').progressbar('setValue', value); 
} 

方法

方法名	方法参数	描述
options	none	返回属性对象。
resize	width	组件大小。  代码示例： $('#p').progressbar('resize');           // 更改进度条到原始宽度 $('#p').progressbar('resize', 350);   // 更改进度条到新的宽度
getValue	none	返回当前进度值。
setValue	value	设置一个新的进度值。

实例代码下载