首页 > Web开发 > 详细

jQuery 插件格式 规范

时间:2016-01-28 16:40:51      阅读:245      评论:0      收藏:0      [点我收藏+]
方式一(自定义对象):

(function($, window, document) {

 var Plugin, defaults, pluginName;

调用时的函数名:
    pluginName = "slidesjs";
     
默认配置:
    defaults= {
      width: 940,
      height: 528,
      callback: {
        loaded: function() {},
        start: function() {},
        complete: function() {}
      }
    };
 
构建自定义对象:
    Plugin = (function() {
      function Plugin(element, options) {
        this.element = element;
        this.options = $.extend(true, {}, defaults, options);          //拓展用户自定义参数
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
      }
      return Plugin;
    })();
 
拓展一系列方法:
Plugin.prototype.init  = function() { ... }
Plugin.prototype.next = function() { ... }
 ...  
 
拓展到jQuery的fn上:
return $.fn[pluginName] = function(options) {
//把选中的每个元素都进行实例化
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
  };
 
 })(jQuery, window, document);
 
使用:
$(function() {
      $(‘#slides‘).slidesjs({
        width: 940,
        height: 528
      });
  });
 
或者这样扩展进jQuery也可以:
$.fn.Swipe = function(params) {
      return this.each(function() {
          $(this).data(‘Swipe‘, new Swipe($(this)[0], params));
      });
  }
 
 
方式2(简单点的):
(function($) {
    "use strict";

    $.fn.boxRefresh = function(options) {
        var _option= $.extend({
            trigger: ".refresh-btn",
            onLoadStart: function(box) {},
            onLoadDone: function(box) {}
        }, options);
        return this.each(function() { ... });
    };

})(jQuery);
 
另一种方式,使用extend:
(function(f) {
    jQuery.fn.extend({slimScroll: function(h) {
                   ...
    }});
 
    jQuery.fn.extend({slimscroll: jQuery.fn.slimScroll})
})(jQuery);
 
技术分享

jQuery 插件格式 规范

原文:http://www.cnblogs.com/chuangweili/p/5166504.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!