jquery easyui文档一（草稿）

Jquery easyui文档

基础

  每个easyui的组件都有属性，方法和事件，开发者可以很方便的扩展他们。

属性

组件的属性定义在jQuery.fn.{plugin}.defaults，例如，dialog的属性定义在jQuery.fn.dialog.defaults

事件

事件（回调函数）也定义在jQuery.fn.{plugin}.defaults

方法

调用方法的语法类似：$('selector').plugin('method', parameter)；

具体来说：

1. Selector就是jquery的对象选择器；
2. Plugin是插件名；
3. Method是plugin对应的方法；
4. Parameter是一个参数对象，可以是一个object，string等；

方法定义在jQuery.fn.{plugin}.methods。每个方法都有两个参数：jq和param，其中第一个参数jq是必须的，这个参数代表的是你要组件对象，第二个参数代表的是要传递给新定义的方法的参数。例如：我们准备在dialog（对话框）组件中新增一个方法mymove，代码如下：

1. $.extend($.fn.dialog.methods, {
2.     mymove: function(jq, newposition){
3.         return jq.each(function(){
4.             $(this).dialog('move', newposition);
5.         });
6.     }
7. });

定义了mymove之后，我们就可以调用mymove方法来移动对话框组件到我们指定的位置了：

1.  $('#dd').dialog('mymove', {

2.      left: 200,

3.      top: 100

4.  });

Jqueryeasy UI起步

下载（并在你开发的页面中INCLUDE）相应JS库文件和相应easyui的css文件等：

1.  <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

2.  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

3.  <script type="text/javascript" src="easyui/jquery.min.js"></script>

4.  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

一旦你的页面中include包含了easyui需要的问题之后，你就可以在自己的页面使用html标记或者js代码定义一个easyui组件了。例如，你想要定义一个有折叠功能的面板，使用html标记实现如下：

1.  <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"

2.          title="My Panel" iconCls="icon-save" collapsible="true">

3.      The panel content

4.  </div>

在使用html标记创建组件的时候，从easyui的1.3版本以后：data-options标记可以支持html5属性名的新写法（所以你可以改写上一段代码如下）：

1.  <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"

2.          title="My Panel" data-options="iconCls:'icon-save',collapsible:true">

3.      The panel content

4.  </div>

如下的代码示例说明：怎样创建一个绑定了onSelect事件的组合框

1.  <input class="easyui-combobox" name="language"

2.          data-options="

3.              url:'combobox_data.json',

4.              valueField:'id',

5.              textField:'text',

6.              panelHeight:'auto',

7.              onSelect:function(record){

8.                  alert(record.text)

9.              }">

解析器

用途

1.  $.parser.parse();       // 解析整个页面

2.  $.parser.parse('#cc');  // 解析特定的节点

属性

Name	Type	Description	Default
$.parser.auto	boolean	Defines if to auto parse the easyui component（定义是否自动解析easyui组件）.	true

 

事件

Name	Parameters	Description
$.parser.onComplete	context	Fires when parser finishing its parse action（在解析器完成解析动作的时候触发此事件）.

方法

Name	Parameter	Description
$.parser.parse	context	Parse the easyui component(解析easyui组件).

 

EasyLoader

用途

载入easyui模块

1.  easyloader.base = '../';    // 设定easyui的主路径

2.  easyloader.load('messager', function(){        // 载入具体的模、、块

3.      $.messager.alert('Title', 'load ok');

4.  });

从绝对路径载入脚本

1.  using('http://code.jquery.com/jquery-1.4.4.min.js', function(){

2.      // ...

3.  });

从相对路径载入脚本

1.  // the script path relative to easyui directory

2.  using('./myscript.js', function(){

3.      // ...

4.  });

属性

Name	Type	Description	Default
modules	object	Predefined modules（预定义的模块）.
locales	object	Predefined locales（预定义的本地化对象）.
base	string	The easyui base directory, must end with '/'.(easyui的主路径，结尾一定要带/)	The base directory will be auto setted relative to easyload.js(easyui的主路径默认会自动设置为easyload.js所在的路径)
theme	string	The name of theme that defined in 'themes' directory（在主题目录下定义的主题名）	default
css	boolean	Defines if loading css file when loading module（是否在载入模块的时候同时载入css文件）	true
locale	string	The locale name（本地化对象的名称）	null
timeout	number	Timeout value in milliseconds. Fires if a timeout occurs（超时的毫秒数，如果达到设定的毫秒数会触发）.	2000

预定义的本地化对象

• af
• bg
• ca
• cs
• cz
• da
• de
• en
• es
• fr
• nl
• tr
• zh_CN（简体中文）
• zh_TW（繁体中文）

事件

Name	Parameters	Description
onProgress	name	Fires when a module is loaded successfully（当模块载入成功后触发）.
onLoad	name	Fires when a module and it's dependencies are loaded successfully（当特定模块以及特定模块所依赖的模块载入成功后触发）.

方法

Name	Parameter	Description
load	module, callback	Load the specified module. When load success a callback function will be called. The module parameter valid type are: a single module name an module array a css file that end with '.css' a js file that end with '.js' （载入指定的模块，如果载入成功那么会调用回调函数，模块参数有如下集中： 单一模块名 模块数组 Css文件 Js文件）

 

 

拖拽

用法介绍

用html标记创建一个可拖拽组件

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

 

用js创建一个可拖拽组件

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

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

属性

name	Type	Description	Default
proxy	string,function	A proxy element to be used when dragging, when set to 'clone', a clone element is used as proxy. If a function is specified, it must return a jQuery object. The example below shows how to create a simple proxy object. $('.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	If set to true, the element will return to its start position when dragging stops（如果设置为TRUE，那么一旦停止拖拽，那么被拖拽的对象将会回到原点）.	false
cursor	string	The css cursor when dragging（不太明白）.	move
deltaX	number	The dragged element position x corresponding to current cursor(拖拽元素和当前光标在横轴上的距离)	null
deltaY	number	The dragged element position y corresponding to current cursor(拖拽元素和当前光标在纵轴上的距离)	null
handle	selector	The handle that start the draggable（启动推拽的句柄）.	null
disabled	boolean	True to stop draggable（true为停止拖动）.	false
edge	number	The drag width in which can start draggable（可拖拽的宽度范围）.	0
axis	string	Defines the axis which the dragged elements moves on, available value is 'v' or 'h', when set to null will move across 'v' and 'h' direction（定义元素在拖拽过程中移动的轴心方向，可以使V或者H。如果设置为空的话将交叉使用V和H两种方向）.	null

Events

Name	Parameters	Description
onBeforeDrag	e	Fires before dragging, return false to cancel this dragging（拖动之前触发，如果返回false那么取消拖动）.
onStartDrag	e	Fires when the target object start dragging（当目标对象开始被拖动时触发）.
onDrag	e	Fires during dragging. Return false will not do dragging actually（拖动过程中触发，如果返回false将不能产生拖拽的效果）.
onStopDrag	e	Fires when the dragging stops（拖拽停止时触发）.

方法

Name	Parameter	Description
options	none	Return the options property（返回options属性）.
proxy	none	Return the drag proxy if the proxy property is setted（返回拖拽代理，如果有设置代理属性））.
enable	none	Enable the drag action（启用拖拽）.
disable	none	Disable the drag action. （禁用用拖拽）