### jQuery EasyUI 官方API文档中文版
*version 1.4 Build 1
作者:王锦阳 CSDN账号:richie696
EasyUI专题 [http://download.csdn.net/album/detail/343](http://download.csdn.net/album/detail/343)*
### 文档
EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展他们。
#### 属性
所有的属性都定义在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',代码如下:
1. $.extend($.fn.dialog.methods, {
1. mymove: function(jq, newposition){
1. return jq.each(function(){
1. $(this).dialog('move', newposition);
1. });
1. }
1. });
~~~
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
~~~
现在你可以调用'mymove'方法将对话框移动到指定位置:
1. $('#dd').dialog('mymove', {
1. left: 200,
1. top: 100
1. });
~~~
$('#dd').dialog('mymove', {
left: 200,
top: 100
});
~~~
### jQuery EasyUI 入门指南
下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。
1. **<link** rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"**>**
1. **<link** rel="stylesheet" type="text/css" href="easyui/themes/icon.css"**>**
1. **<script** type="text/javascript" src="easyui/jquery-1.7.2.min.js"**></script>**
1. **<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代码如下:
1. **<div** id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
1. title="My Panel" iconCls="icon-save" collapsible="true"**>**
1. The panel content
1. **</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兼容属性名称。所以你可以改写上面的代码为:
1. **<div** id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
1. title="My Panel" data-options="iconCls:'icon-save',collapsible:true"**>**
1. The panel content
1. **</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事件。
1. **<input** class="easyui-combobox" name="language"
1. data-options="
1. url:'combobox_data.json',
1. valueField:'id',
1. textField:'text',
1. panelHeight:'auto',
1. onSelect:function(record){
1. alert(record.text)
1. }" **/>**
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)