JavaScript jQuery插件模板

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript jQuery插件模板相关的知识,希望对你有一定的参考价值。

/*
 * Plugin template
 */
(function(window, $){
  var Plugin = function(elem, options){
      this.elem = elem;
      this.$elem = $(elem);
      this.options = options;
    };

  Plugin.prototype = {
    defaults: {
      message: 'Hello world!'
    },
    init: function() {
      this.config = $.extend({}, this.defaults, this.options);

      this.displayMessage();

      return this;
    },
    displayMessage: function() {
      alert(this.config.message);
    }
  };

  Plugin.defaults = Plugin.prototype.defaults;

  $.fn.plugin = function(options) {
    return this.each(function() {
      new Plugin(this, options).init();
    });
  };

  window.Plugin = Plugin;
})(window, jQuery);

/*
 * Use plugin
 */
//Set the message per instance:
$('#elem').plugin({
  message: 'Goodbye World!'
});

var p = new Plugin(document.getElementById('elem'), {
  message: 'Goodbye World!'
}).init();

//Or, set the global default message:
Plugin.defaults.message = 'Goodbye World!';

以上是关于JavaScript jQuery插件模板的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript jQuery插件模板

jQuery插件模板

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件

javascript模板插件amaze.js

jQuery插件编写及链式编程模型小结

js模板引擎---jtemplates使用