Tuesday, December 30, 2014

Esayui and my97

Esayui 扩展插件扩展---my97
一直觉得easyui的有几个插件肯鸡肋,这其中就包括了日期插件,怎么用都不顺手。所以一直以来在项目中都是用my97替换了日期插件。既然也是作为一款单独的插件使用,为了能够良好的和easyui的写法达到结合,所以就扩展了easyui的一个插件,以便于在使用my97的时候能和easyui有一个很好的契合度。下面附上扩展源码:

(function ($) {
 $.fn.my97 = function (options, params) {
  if (typeof options == "string") {
   return $.fn.my97.methods[options](this, params);
  }
  options = options || {};
  if (!WdatePicker) {
   alert("未引入My97js包!");
   return;
  }
  return this.each(function () {
   var data = $.data(this, "my97");
   var newOptions;
   if (data) {
    newOptions = $.extend(data.options, options);
    data.opts = newOptions;
   } else {
    newOptions = $.extend({}, $.fn.my97.defaults, $.fn.my97.parseOptions(this), options);
    $.data(this, "my97", {
     options : newOptions
    });
   }
   $(this).addClass('Wdate').click(function () {
    WdatePicker(newOptions);
   });
  });
 };
 $.fn.my97.methods = {
  setValue : function (target, params) {
   target.val(params);
  },
  getValue : function (target) {
   return target.val();
  },
  clearValue : function (target) {
   target.val('');
  }
 };
 $.fn.my97.parseOptions = function (target) {
  return $.extend({}, $.parser.parseOptions(target, ["el", "vel", "weekMethod", "lang", "skin", "dateFmt", "realDateFmt", "realTimeFmt", "realFullFmt", "minDate", "maxDate", "startDate", {
      doubleCalendar : "boolean",
      enableKeyboard : "boolean",
      enableInputMask : "boolean",
      autoUpdateOnChanged : "boolean",
      firstDayOfWeek : "number",
      isShowWeek : "boolean",
      highLineWeekDay : "boolean",
      isShowClear : "boolean",
      isShowToday : "boolean",
      isShowOthers : "boolean",
      readOnly : "boolean",
      errDealMode : "boolean",
      autoPickDate : "boolean",
      qsEnabled : "boolean",
      autoShowQS : "boolean",
      opposite : "boolean"
     }
    ]));
 };
 $.fn.my97.defaults = {
  dateFmt : 'yyyy-MM-dd HH:mm:ss'
 };

 $.parser.plugins.push('my97');
})(jQuery);
 默认的用法和easyui的原生插件是一样的,可以通过class实例化,也可以通过代码实例化

<input  class="easyui-my97" type="text">


<input  id="my97" type="text" name="">
$('#my97').my97(options);


至于options属性和事件,这是完全和my91自身的一样,没有新增也没有减少。
my97配置属性说明:http://www.my97.net/dp/demo/resource/3.asp

No comments:

Post a Comment