Question

我是jquery的初学者。我不知道如何制作jquery插件。我有代码片段它是否适当？

因为init函数中的这个关键字会产生错误。

错误：类型错误：j在jquery.js中未定义。

请提供正确的jQuery插件方式

＆＃13;

;
(function($, doc, win) {
  "use strict";

  function Widget(el, opts) {
    this.$el = $(el);
    this.init();
  }

  // Plugin definition.
  $.fn.am_custum_slider = function(options) {
    var args = arguments;
    var opts = $.extend({}, $.fn.am_custum_slider.defaults, options);
    return this.each(function() {
      //$.fn.Widget.init(this, opts);
      new Widget(this, opts);
    });

  };
  Widget.prototype.init = function() {
      $(this).append('<ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul>');
    },

    // Plugin defaults – added as a property on our plugin function.
    $.fn.am_custum_slider.defaults = {
      sliderWidth: 720,
      sliderHeight: 350,
      animationSpeed: 1000,
      pause: 3000,
      currentSlide: 1,

      noSliders: 5,
      noSlidesPerSlide: 5,

      titleShow: true,
      description: true,
      dataSlider: {
        "slider1": [{
          "Title": "Title 1",
          "Description": "Description 1",
          "imagePath": "images/slider1.jpg"
        }, {
          "Title": "Title 2",
          "Description": "Description 2",
          "imagePath": "images/slider2.jpg"
        }, {
          "Title": "Title 3",
          "Description": "Description 3",
          "imagePath": "images/slider3.jpg"
        }, {
          "Title": "Title 4",
          "Description": "Description 4",
          "imagePath": "images/slider4.jpg"
        }, {
          "Title": "Title 5",
          "Description": "Description 5",
          "imagePath": "images/slider5.jpg"
        }, ]
      }
    };

})(jQuery, document, window);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custum_slider"></div>
<script>
  $(document).ready(function() {
    $(".custum_slider").am_custum_slider();
  });
</script>

＆＃13;

Answer 1

你快到了：）

尝试更改init函数，$(this)似乎无效，因为this上下文引用了Widget对象，而不是dom .. dom应该是$el

Widget.prototype.init = function () {
    this.$el.append('<ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul>');
};

Answer 2

创建插件有几种不同的模式，但这里有一些基于当前代码的注释。

注意：您的Widget构造函数未存储传递给它的options，因此这些选项将无法用于插件代码。您当前的代码假定选项已传递给init，但您不会对它们执行任何操作。

构造函数可能是这样的：

function Widget(el, opts) {
   this.$el = $(el);             // Save the jQuery element
   this.options = opts;          // Save the options
   this.init();                  // Init the plugin
}

可以在新构造的类实例上调用init方法（类是Javascript中的函数）。然后，您可以传递实例（您当前假设传递了jQuery元素）：

e.g。

// "this" is the class instance
Widget.prototype.init = function() {
      this.$el.append('<ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li><li><img src="slide4.jpg" /></li></ul>');
};

＆＃34; this＆＃34;传递给你的init函数是类本身的实例（因为它已经包含.$el jQuery元素属性），所以你只需要以下内容：

return this.each(function() {
     var widget = new Widget(this, opts);
});

旁注：由于您的软件受众通常是全球性的，请使用custom拼写o：）

如何制作jquery插件？

2 个答案: