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‘ 
}); 

属性

$(‘.dragitem‘).draggable({
	proxy: function(source){
		var p = $(‘<div style="border:1px solid #ccc;width:80px"></div>‘);
		p.html($(source).html()).appendTo(‘body‘);
		return p;
	}
});

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‘ 
}); 

属性

事件

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 
}); 

属性

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‘        
	});   
 }});

属性

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‘   
}); 

属性

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); 
} 

方法

$(‘#p‘).progressbar(‘resize‘);           // 更改进度条到原始宽度
$(‘#p‘).progressbar(‘resize‘, 350);   // 更改进度条到新的宽度

实例代码下载