1

拡張可能な jQuery プラグイン開発を学ぼうとしています。jQueryプラグインラッパーからクラス内の関数を呼び出す方法に完全に困惑しています。

私は主にhereからコードのラッパーを作成し、これを理解し/使用しようとしましが、あまり運がありませんでした。

以下のコードの重要な部分。$(something).carousel(5)(eg)を呼び出して、その番号をslideCarousel クラス内の関数に渡すことができるようにしたいのです。文字列も同じなので、クラス内で$(something).carousel('go')実行されます。go

この構造でこれを行うにはどうすればよいですか?

(function(window, $){

  var Carousel = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
  };

  Carousel.prototype = {

    defaults: {
     [...]
    },

    init: function() {
      this.config = $.extend({}, this.defaults, this.options);
      this.create();
      return this;
    },
    create: function() {
       [...]
    },
    slide: function(num) {
       [...]
    }
  };

  Carousel.defaults = Carousel.prototype.defaults;

  $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);
      if (!options || typeof options == 'object') carousel.init();
      else if (typeof options == 'number') carousel.slide(options);
      else if (typeof options == 'string') carousel.options;

    });
  };

  window.Carousel = Carousel;

})(window, jQuery);
4

1 に答える 1

1

あなたは多かれ少なかれ正しい軌道に乗っています.あなたの主な問題は、呼び出しがインスタンスの属性にcarousel.optionsアクセスするだけであることです. あなたがしたいことは、インスタンスで関数を動的に呼び出すことです:optionsCarousel

 $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);

      // do a loose comparison with null instead of !options; !0 == true
      if (options != null || typeof options === 'object')
        carousel.init();
      else if (typeof options === 'number')
        carousel.slide(options);
      // make sure options is the name of a function on carousel
      else if (typeof options === 'string' && typeof carousel[options] === 'function') {
        carousel[options](); // call the function by name
      }

    });
  };
于 2013-05-26T14:56:42.350 に答える