本汉化文档系本人原创翻译制作，在过年期间花费了我数个日夜进行名词抽取、翻译、润色、译者注等工作，在文档中我对一些重要的方法、属性、事件等都做了详细的批注以及示例展示，这是英文原版中没有的内容。为了让大家更好的理解我对翻译完成后的文档进行了二次校验和润色。由于时间较紧，可能里面翻译的某些地方存在一些问题或错别字，如果你发现了问题可及时与我联系，E-mail:richie696@vip.qq.com QQ:115198807，欢迎大家能协助我一起完善该API文档，我也会对该文档持续进行维护和更新，如有任何疑问请到我的博客中提出（http://blog.sina.com.cn/richie696）。英文原版API版权归原版权人所有，汉化版版权归本人所有。未经本人许可请勿对本文档进行复制或再发行，谢谢合作！
属性
所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。
事件
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
方法
调用方法的语法：$('selector').plugin('method', parameter);
解释：
selector 是jQery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
所有方法都定义在jQuery.fn.{plugin}.methods。每个方法都有2个参数：jq和param。第一个参数'jq'是必须的，这是指的jQuery对象。第二个参数'param'是指传入方法的实际参数。例如，为dialog组件扩展一个方法名为'mymove'，代码如下：
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
现在你可以调用'mymove'方法将对话框移动到指定位置：
$('#dd').dialog('mymove', {
left: 200,
top: 100
});
$('#dd').dialog('mymove', {
left: 200,
top: 100
});
jQuery EasyUI 入门指南
下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
一旦你导入了EasyUI必须的文件，你就可以通过标记或Javascript定义一个EasyUI组件。例如：定义一个带可折叠功能的面板，你需要写的HTML代码如下：
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" iconCls="icon-save" collapsible="true">
The panel content
</div>
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" iconCls="icon-save" collapsible="true">
The panel content
</div>
当通过标记创建一个组件的时候从1.3版开始'data-options'属性可以用来支持HTML5兼容属性名称。所以你可以改写上面的代码为：
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
</div>
<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
</div>
下面的代码演示了如何创建一个组合框，并绑定onSelect事件。
<input class="easyui-combobox" name="language"
data-options="
url:'combobox_data.json',
valueField:'id',
textField:'text',
panelHeight:'auto',
onSelect:function(record){
alert(record.text)
}" />
