easyui之linkbutton控件分析

/**
 * linkbutton - jQuery EasyUI
 * 
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ stworthy@gmail.com ] 
 */

/**
 * 首先,一个按钮的html元素结构如下:
 * <a href="#" class="easyui-linkbutton l-btn" οnclick="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);