easyui之linkbutton控件分析

/** * linkbutton - jQuery EasyUI *  * Licensed under the GPL: *   http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ [e-mail] ]  *//** * 首先,一个按钮的html元素结构如下: * <a href="#" class="easyui-linkbutton l-btn" onclick="load2()"><span class="l-btn-left"><span class="l-btn-text">Load Dialog</span></span></a> * * 针对某个元素创建了按钮后,设置的参数及内容都会存储在$.data($(el),'linkbutton') */(function($){      function createButton(target) {      //首先取出来之前拼接好的参数对象      var opts = $.data(target, 'linkbutton').options;      //先不dom元素内容清空      $(target).empty();      //给最外层加类'l-btn'      $(target).addClass('l-btn');      //设置外层的id      if (opts.id){         $(target).attr('id', opts.id);      } else {         $(target).removeAttr('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('&nbsp;').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);         }      }            setDisabled(target, opts.disabled);   }      function setDisabled(target, disabled){      var state = $.data(target, 'linkbutton');      if (disabled){         state.options.disabled = true;         var href = $(target).attr('href');         if (href){            state.href = href;            $(target).attr('href', 'javascript:void(0)');         }         var onclick = $(target).attr('onclick');         if (onclick) {            state.onclick = onclick;            $(target).attr('onclick', null);         }         $(target).addClass('l-btn-disabled');      } else {         state.options.disabled = false;         if (state.href) {            $(target).attr('href', state.href);         }         if (state.onclick) {            target.onclick = state.onclick;         }         $(target).removeClass('l-btn-disabled');      }   }   //这个方法,在paser解析完页面并加载完所有引用到的模块后会被调用,调用的形式如:$(".easyui-linkbutton")["linkbutton"]()   $.fn.linkbutton = function(options){      if (typeof options == 'string'){         //如果参数是字符串         switch(options){         case 'options':            //如果是'option'就返回设置的option的对象            return $.data(this[0], 'linkbutton').options;         case 'enable':            //如果是'enable'就设置当前控件可用            return this.each(function(){               setDisabled(this, false);            });         case 'disable':            //如果是'disable'就设置当前控件不可用            return this.each(function(){               setDisabled(this, true);            });         }      }      /*下面的都是在组装option对象*/      options = options || {};      return this.each(function(){         //取出原来就有的设置项         var state = $.data(this, 'linkbutton');         if (state){            //如果有原来的设置,就用现在的参数去压盖以前的参数            $.extend(state.options, options);         } else {            //如果没有原来的设置,就根据dom元素初始化配置,然后缓存到当前对象的'linkbutton'属性里面            var t = $(this);            $.data(this, 'linkbutton', {               options: $.extend({}, $.fn.linkbutton.defaults, {                  id: t.attr('id'),                  disabled: (t.attr('disabled') ? true : undefined),                  plain: (t.attr('plain') ? t.attr('plain') == 'true' : undefined),                  text: $.trim(t.html()),                  iconCls: t.attr('icon')               }, options)            });            t.removeAttr('disabled');         }         //组装的参数对象都存储到了对象的'linbutton'属性里,下面就开始真个创建按钮         createButton(this);      });   };   //创建新的按钮时默认的参数值   $.fn.linkbutton.defaults = {         id: null,         disabled: false,         plain: false,         text: '',         iconCls: null   };   })(jQuery);