标签：
1. 每一个easyui组件都有一个以其组件名称命名的函数例如：linkbutton：
这个函数的功能有三部分：
$.fn.linkbutton = function(options, param){
// 第一个功能：这个函数可以接受一个字符串参数，这个字符串参数通常就是
// 这个组件所提供的函数的名称，通过下面的代码就实现了，对该函数的调用
// 其实这里可以这样实现的原因是，js 不是一种强类型语言，所以他不会检查函数传递参数的类型。这就给函数传递的参数的作用可以动态变化。
????????if (typeof options == ‘string‘){
????????????return $.fn.linkbutton.methods[options](this, param);
????????}
????????
????????options = options || {};
????????return this.each(function(){
// 这里的this其实就是使用选择器，选中的DOM元素。此时下面的方法（这个方法来自jquery）就是获取，当前元素是是否绑定了 linkbutton 这个数据，如果没有绑定下面的 state 就是 undefied.显然第一次创建 linkbutton 对象时，肯定是未绑定的。所以下面的if判断就是失败的。流程跳转到else部分。
????????????var state = $.data(this, ‘linkbutton‘);
????????????if (state){
????????????????$.extend(state.options, options);
????????????} else {
// 下面的代码就是将，linkbutton 对象的配置属性绑定到 当前的DOM对象上。可以看到，对象的属性来自三个方面：
1. $.fn.linkbutton.defaults 这是对象默认的配置属性。在对象的实现文件中就有，例如：（来自 jquery.linkbutton.js）
????$.fn.linkbutton.defaults = {
????????id: null,
????????disabled: false,
????????plain: false,
????????text: ‘‘,
????????iconCls: null
????};
2. $.fn.linkbutton.parseOptions(this) ，这个通过将this对象传递给parseOptions这个函数后，在DOM元素的html标签上获取的配置属性例如：
<a href="#" id="btn" iconCls="icon-search">easyui</a>
3. options. 这个是 linkbutton这个函数被调用时，通过参数传递进来的。通常在使用js代码生成linkbutton时，就会将这个参数传递。例如：
$(‘#btn‘).linkbutton({plain:true});
最后，这样一句调用：
????????????????$.data(this, ‘linkbutton‘, {
????????????????????options: $.extend({}, $.fn.linkbutton.defaults, $.fn.linkbutton.parseOptions(this), options)
????????????????});
就把，所有有关该组件的配置属性全部的传递到 DOM 对象的 options 属性上。此时就可以使用 $.data(this, ‘linkbutton‘) 来获得关于该对象的配置属性。
????????????????$(this).removeAttr(‘disabled‘);
????????????}
// 第三部分创建linkbutton.
????????????createButton(this);
????????});
????};
2. 下面来看看对象的创建 function createButton(target)
function createButton(target) {
// 1. 获得对象的配置属性
????????var opts = $.data(target, ‘linkbutton‘).options;
// 2. 清空对象的所有子元素。
????????$(target).empty();
// 3. 设置对象的标准配置演示。
????????$(target).addClass(‘l-btn‘);
// 4. 依据对象的options来设置DOM的属性。
????????// 设置ID
????????if (opts.id){
????????????$(target).attr(‘id‘, opts.id);
????????} else {
//????????????$.fn.removeProp ? $(target).removeProp(‘id‘) : $(target).removeAttr(‘id‘);
//????????????$(target).removeAttr(‘id‘);
????????????$(target).attr(‘id‘, ‘‘);
????????}
????????// 设置显示样式
????????if (opts.plain){
????????????$(target).addClass(‘l-btn-plain‘);
????????} else {
????????????$(target).removeClass(‘l-btn-plain‘);
????????}
????????// 设置显示文本以及文本旁边的图标
????????if (opts.text){
????????????$(target).html(opts.text).wrapInner(
????????????????????‘<span class="l-btn-left">‘ +
????????????????????‘<span class="l-btn-text">‘ +
????????????????????‘</span>‘ +
????????????????????‘</span>‘
????????????);
????????????if (opts.iconCls){
????????????????$(target).find(‘.l-btn-text‘).addClass(opts.iconCls).css(‘padding-left‘, ‘20px‘);
????????????}
????????} else {
????????????$(target).html(‘ ‘).wrapInner(
????????????????????‘<span class="l-btn-left">‘ +
????????????????????‘<span class="l-btn-text">‘ +
????????????????????‘<span class="l-btn-empty"></span>‘ +
????????????????????‘</span>‘ +
????????????????????‘</span>‘
????????????);
????????????if (opts.iconCls){
????????????????$(target).find(‘.l-btn-empty‘).addClass(opts.iconCls);
????????????}
????????}
// 设置按钮的启用禁用。
????????$(target).unbind(‘.linkbutton‘).bind(‘focus.linkbutton‘,function(){
????????????if (!opts.disabled){
????????????????$(this).find(‘span.l-btn-text‘).addClass(‘l-btn-focus‘);
????????????}
????????}).bind(‘blur.linkbutton‘,function(){
????????????$(this).find(‘span.l-btn-text‘).removeClass(‘l-btn-focus‘);
????????});
????????
????????setDisabled(target, opts.disabled);
????}
到此为止，一个linkbutton组件就创建好了。
3. 看看linkbutton 是如何解析页面配置属性的。
$.fn.linkbutton.parseOptions = function(target){
????????var t = $(target);
????????return $.extend({}, $.parser.parseOptions(target, [‘id‘,‘iconCls‘,{plain:‘boolean‘}]), {
????????????disabled: (t.attr(‘disabled‘) ? true : undefined),
????????????text: $.trim(t.html()),
????????????iconCls: (t.attr(‘icon‘) || t.attr(‘iconCls‘))
????????});
????};
从上面的代码可以看到，其实就是通过jquery的选择器，获取，预定义属性的值，然后创建配置对象。这就实现了页面配置属性的解析。
4. 创建组件的两种方法
在easyui中创建组件有两种方法：
4.1 调用组件的创建函数，例如：
1. $(‘#btn‘).linkbutton({
2. plain:true
3. });
4. $(‘#btn‘).linkbutton(‘disable‘); // 禁用此 button
5. $(‘#btn‘).linkbutton(‘enable‘); // 启用此 button
在js文件调用上面的代码。即可创建一个linkbutton同时可以设置属性。此时我们知道其实就是调用了 linkbutton 函数。所以这里的组件创建其实是我们主动创建的。
4.2 html 写法
<a href="#" id="btn" iconCls="icon-search">easyui</a>
我们非常好奇的是：这种写法对象是怎样被创建的。其实这里就用到了easyui的解析器。上面的html加载完毕之后就会调用，解析器，来解析页面，从而创建相应的easyui组件.easyui的解析器就是jquery.parser.js.这个文件中定义了一个parse方法这个方法就是用来解析页面中的html标签创建的easyui组件的.那么这个方法在何时被调用呢.我们查看 jquery.easyui.min.js 文档,搜索 parser 发现了下面的代码:
$(function(){
if(!window.easyloader&&$.parser.auto){
$.parser.parse();
}
});
由此当一个html页面包含 jquery.easyui.min.js 文件时,则页面加载完毕之后,就会调用 $.parser.parse(); 来执行页面解析，将easyui组件解析出来。
下面就来看看 parse 函数是如何实现页面解析的。
5. parser.parse 函数（定义在 jquery.parser.js文件中）
这个函数实现了两个功能就是加载，easyui预定义组件和动态加载组件。其核心代码如下：
// 下面的数组就是 easyui 预定义的组件。
plugins:[‘draggable‘,‘droppable‘,‘resizable‘,‘pagination‘,
???????? ‘linkbutton‘,‘menu‘,‘menubutton‘,‘splitbutton‘,‘progressbar‘,
???????????????? ‘tree‘,‘combobox‘,‘combotree‘,‘combogrid‘,‘numberbox‘,‘validatebox‘,‘searchbox‘,
???????????????? ‘numberspinner‘,‘timespinner‘,‘calendar‘,‘datebox‘,‘datetimebox‘,‘slider‘,
???????????????? ‘layout‘,‘panel‘,‘datagrid‘,‘propertygrid‘,‘treegrid‘,‘tabs‘,‘accordion‘,‘window‘,‘dialog‘
????????],
// 下面就是 parse 函数的定义
????????parse: function(context){
????????????var aa = [];
// 加载组件的算法也非常简洁：对于加载函数来说，她也不知道，页面存在那些easyui组件，所以，其加载策略就是，将 其所支持的所有组件轮询加载一边。如果对象存在，就调用创建函数。否则，就不创建。同时由于easyui提供一种按需加载的组件加载模式，所以当进行文档解析时，有可能，某个组件的js文件还没有被加载出来，所以首先将其保存的 数组 aa 中。后面再加载解析。
?
????????????for(var i=0; i<$.parser.plugins.length; i++){
????????????????var name = $.parser.plugins[i];
????????????????var r = $(‘.easyui-‘ + name, context);
????????????????if (r.length){
????????????????????if (r[name]){
???? // 调用组件的创建函数。
????????????????????????r[name]();
????????????????????} else {
????// 将还未加载的组件先保存起来。
????????????????????????aa.push({name:name,jq:r});
????????????????????}
????????????????}
????????????}
// 2. 按需加载所需要的组件。
????????????if (aa.length && window.easyloader){
????????????????var names = [];
????????????????for(var i=0; i<aa.length; i++){
????????????????????names.push(aa[i].name);
????????????????}
// 加载组件。之后调用创建函数，在页面上渲染组件。
????????????????easyloader.load(names, function(){
????????????????????for(var i=0; i<aa.length; i++){
????????????????????????var name = aa[i].name;
????????????????????????var jq = aa[i].jq;
????????????????????????jq[name]();//创建组件
????????????????????}
????????????????????$.parser.onComplete.call($.parser, context);
????????????????});
????????????} else {
????????????????$.parser.onComplete.call($.parser, context);
????????????}
????????}
?
easyloader其实也很简单，就是依据名称加载对应的js以及css文件。
5. 关于 easyui 的 datagrid 中的 formatter.
这个函数可以格式化单元格，但是，当我们在其中添加类似的
<a href="#" id="btn" iconCls="icon-search">value</a>
时却不能正确的解析成easyui组件，其实，根本原因是：由 formatter 的实现方法决定的，其实现代码如下：
var th=$(this);
formatter:(th.attr("formatter")?eval(th.attr("formatter")):undefined),
由此可将，其实他并没有再次做easyui的组件解析工作，所以要先上面的标签被解析成easyui组件，就必须，在数据加载完毕之后在，显示的解析该组件。其方法是：
onLoadSuccess实现这个事件，当数据加载成功时触发被触发。所以在这里调用：
linkbutton()函数即可。
6. 查看源代码之后，其实我们可以这样调用函数：
<a href="#" id="btn" class="easyui-linkbutton" iconCls="icon-search">wow</a>
?
var btn = $("#btn");
btn.linkbutton.methods[‘disable‘](btn);
标签：
原文地址：http://www.cnblogs.com/a-ray-of-sunshine/p/4658706.html
