EasyUi基础

语法解析[Parser]

使用方法：

 
 
$.parser.parse();       // 解析所有的页面
$.parser.parse('#cc');  // 解析特定的代码

属性：

名称	类型	描述	默认值
$.parser.auto	boolean（布尔型）	定义是否自动解析easyui组件。	true

事件：

名称	参数	描述
$.parser.onComplete	context	当语法解析结束时触发事件。

方法：

名称	参数	描述
$.parser.parse	context	解析easyui组件。

简单载入器[Easyloader]

width="100%" height="300" src="jquery-easyui-1.3.1/demo/easyloader.html" frameborder="0">

查看源代码

使用方法：

 
 
easyloader.base = '../';    // 设置easyui根目录
easyloader.load('messager', function(){        // 载入特定模块
    $.messager.alert('Title', 'load ok');
});

属性：

名称	类型	描述	默认值
modules（模块）	object（对象）	预定义模块。
locales（多语言）	object（预定义对象）	预定义多语言。
base（目录）	string（字符串）	easyui根目录,必须以'/'结尾。	easyui根目录将会被自动设置 为相对于easyload.js的位置。
theme（主题名称）	string（字符串）	'themes'目录中的主题的名称。	default
css（层叠样式表）	boolean（布尔型）	定义是否在加载模块的同时加载css文件。	true
locale（自定义语言）	string（字符串）	语言名称。	null
timeout（超时）	number（数字）	超时单位为毫秒，出现超时就触发。	2000

预定义语言：

af bg ca cs da de(德语) en(英语) fr(法语) nl zh_CN(简体中文) zh_TW(繁体中文)

事件：

名称	参数	描述
onProgress	name	当一个模块成功载入时触发。
onLoad	name	当一个模块及其所有依赖关系（可以理解为载入该模块所需要的其他模块、属性、方法等）载入时触发。

方法：

名称	参数	描述
load	module, callback	载入特定的模块。当载入成功时将调用回调函数。 有效的模块参数类型如下： 单一的模块名称 一个存储有模块名称的数组 一个以'.css'结尾的样式文件 一个以'.js'结尾的js文件

一般拖动[draggable]

使用$.fn.draggable.defaults重载默认值。

width="100%" class="autoheight" src="jquery-easyui-1.3.1/demo/draggable.html" frameborder="0">

查看源代码

使用方法：

  
  
<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对象。	null
revert（复原）	boolean（布尔型）	如果设置为true, 当拖动停止时元素将返回它的初始位置。	false
cursor（指针）	string（字符串）	拖动时的CSS指针。	move
deltaX（水平增量，X轴）	number（数字）	被拖动元素对应于当前指针的水平位置。	null
deltaY（垂直增量，y轴）	number（数字）	被拖动元素对应于当前指针的垂直位置。	null
handle（句柄）	selector（选择器）	开始拖动的句柄。	null
disabled（停止拖动）	boolean（布尔型）	当设置为true时停止拖动。	false
edge（边缘）	number（数字）	可以在其中拖动的容器的宽度	0
axis（拖动轴）	string（字符串）	可用值为'v'或者'h',当设置为空时，元素可以同时在水平和垂直方法拖动。	null

事件：

名称	参数	描述
onBeforeDrag	e	在拖动之前触发，返回false将取消拖动。
onStartDrag	e	当目标对象开始被拖动时触发。
onDrag	e	在拖动过程中触发，当不能再拖动时返回false。
onStopDrag	e	当拖动停止时触发。

方法：

名称	参数	描述
options	none	返回属性对象。
proxy	none	如果替代元素被设置，返回将被用于拖动的替代元素。
enable	none	允许拖动。
disable	none	禁止拖动。

拖动至容器[droppable]

使用$.fn.draggable.defaults重载默认值。

width="100%" id="autoHeight" src="case/../jquery-easyui-1.3.1/demo/droppable2.html" frameborder="0" style="height: 283px;">

查看源代码 示例一示例二

使用方法：

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

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

属性：

名称	类型	描述	默认值
accept	selector	决定哪个可拖动元素将会被接收。	null

事件：

名称	参数	描述
onDragEnter	e,source	当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。
onDragOver	e,source	当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。
onDragLeave	e,source	当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。
onDrop	e,source	当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。

缩放[resizable]

使用$.fn.resizable.defaults重载默认值

查看源代码

使用方法：

  
  
<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'表示向右（东）等。	n, e, s, w, ne, se, sw, nw, all
minWidth（最小宽度）	number（数字）	缩放时所允许的最小宽度。	10
minHeight（最小高度）	number（数字）	缩放时所允许的最小高度。	10
maxWidth（最大宽度）	number（数字）	缩放时所允许的最大宽度。	10000
maxHeight	number（数字）	缩放时所允许的最大高度。	10000
edge（边界）	number（数字）	将被缩放的边框的边界。	5

事件：

名称	参数	描述
onStartResize	e	当开始缩放时触发。
onResize	e	在缩放过程中触发，当返回false时, DOM元素将不再缩放。
onStopResize	e	当缩放停止是触发。

分页[pagination]

使用$.fn.pagination.defaults重载默认值。

查看源代码

依赖关系

• 链接按钮

使用方法：

  
  
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>  

  
  
$('#pp').pagination({
    total:2000,
    pageSize:10
});  

属性：

名称	类型	描述	默认值
total（总数）	number（数字）	总记录数，当创建分页时必须设置。	1
pageSize（每页记录数）	number（数字）	每页显示的记录数。	10
pageNumber（当前页码）	number（数字）	当分页创建完毕时显示当前页码。	1
pageList（可选择的每页记录数）	array（数组）	用户能够改变每页显示的记录数。	[10,20,30,50]
loading（是否正在载入）	boolean（布尔型）	定义数据是否正在载入。	false
buttons（按钮）	array（数组）	自定义按钮，每个按钮包含2个属性: iconCls： 显示背景图片的CSS类 handler： 当按钮被点击时调用的一个句柄函数	null
showPageList（显示可选择的每页记录数）	boolean（布尔型）	定义是否显示可选择的每页记录数。	true
showRefresh（显示刷新）	boolean（布尔型）	定义是否显示刷新按钮。	true
beforePageText（输入框之前的文本）	string（字符串）	在输入框之前显示的符号。	Page
afterPageText（输入框之后的文本）	string（字符串）	在输入框之后显示的符号。	of {pages}
displayMsg（显示信息）	string（字符串）	在插件右上方显示分页信息。	Displaying {from} to {to} of {total} items

事件：

名称	参数	描述
onSelectPage	pageNumber, pageSize	当用户进行翻页时触发，回调函数包含2个参数: pageNumber： 下一页的页码 pageSize： 下一页的显示记录数
onBeforeRefresh	pageNumber, pageSize	刷新之前触发, 返回false将取消刷新。
onRefresh	pageNumber, pageSize	刷新之后触发。
onChangePageSize	pageSize	当用户修改每页显示记录数时触发。

方法：

名称	参数	描述
options	none	返回分页属性对象。
loading	none	提醒分页插件正在载入。
loaded	none	提醒分页插件已经载入。

搜索框[searchbox]

使用$.fn.searchbox.defaults重载默认值。

查看源代码

依赖关系

• 菜单按钮

使用方法：

1. 使用标签创建。对input标签引用'easyui-searchbox'类。

  
  
<script type="text/javascript">
    function qq(value,name){
        alert(value+":"+name)
    }
</script>
<input id="ss" class="easyui-searchbox" searcher="qq" prompt="Please Input Value" menu="#mm" style="width:300px"></input>
<div id="mm" style="width:120px">
<div name="all" iconCls="icon-ok">All News</div>
  <div name="sports">Sports News</div>
</div>  

  
  
$('#pp').pagination({
    total:2000,
    pageSize:10
});  

2. 使用脚本创建。

  
  
<input id="ss"></input>
<div id="mm" style="width:120px">
    <div name="all" iconCls="icon-ok">All News</div>
    <div name="sports">Sports News</div>
</div>
$('#ss').searchbox({
    width:200,
    searcher:function(value,name){
        alert(value + "," + name)
    },
    menu:'#mm',
    prompt:'Please Input Value'
});

属性：

名称	类型	描述	默认值
width（宽度）	number（数字）	设置组建的宽度。	auto
propmt（提醒）	string（字符串）	显示在搜索框的提醒信息。	''
value（值）	string（字符串）	搜索框的默认值。	''
menu（菜单）	selector（选择器）	搜索类型下拉菜单。	null
searcher（搜索器）	function(value,name)	当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。	null

方法：

名称	参数	描述
options	none	返回搜索框属性对象。
menu	none	返回搜索类型菜单对象。
textbox	none	返回文本框对象。
getValue	none	返回当前搜索关键字。
setValue	value	设置新的搜索关键字。
getName	none	返回当前搜索类型。
destroy	none	清除搜索框组件
resize	width	重置搜索框组建的宽度。

进度条[progressbar]

使用$.fn.progressbar.defaults重载默认值。

查看源代码

使用方法：

创建进度条：

进度条组件可以通过html标签或脚本两种方法创建。使用html标签创建更容易，只需要对

标签引用'easyui-progressbar'类。

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

获取/设置进度值

为进度条获取当前进度值并且设置一个新的进度值。

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

属性：

名称	类型	描述	默认值
width（宽度）	string（字符串）	设置进度条的宽度。	auto
value（值）	number（数字）	当前进度，百分比数值。	0
text（文本）	string（字符串）	显示在组件中的文本模板。	{value}%

事件：

名称	参数	描述
onChange	newValue,oldValue	当进度发生改变时触发。

方法：

名称	参数	描述
options	none	返回进度条属性对象。
resize	width	重置进度条。
getValue	none	返回当前进度值。
setValue	value	设置一个新的进度值。