how to make jquery plugin?

Question

I am beginner in jquery. i do not know how to make jquery plugin. i have snippet my code Is it Proper or not?

In that error is generated due to this keyword in init function.

error : TypeError: a is undefined in jquery.js.

Please provide me proper way jQuery plugin

;
(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);

<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>

Start from here

hindmost
– hindmost

2014-12-31 10:32:53 +00:00
Commented Dec 31, 2014 at 10:32 — hindmost
– hindmost, Commented Dec 31, 2014 at 10:32

ChinKang · Accepted Answer · 2014-12-31 11:12:22Z

1

You're almost there :)

Try to change the init function, $(this) seems to be invalid because this context refering to the Widget object, not the dom..the dom should be $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>');
};

answered Dec 31, 2014 at 11:12

ChinKang

4,3422 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iCollect.it Ltd · Accepted Answer · 2014-12-31 11:13:16Z

There are a few different patterns for creating plugins, but here are some notes based around your current code.

Note: Your Widget constructor is not storing the options passed to it, so those options will not be available to the plugin code. Your current code assumes the options are passed to init, but you do nothing with them.

The constructor could be something like this instead:

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

An init method can be called on a newly constructed instance of a class (classes are are functions in Javascript). You can then pass the instance (you are currently assuming the jQuery element is passed):

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>');
};

The "this" passed to your init function is the instance of the class itself (as it already contains the .$el jQuery element property), so you only need the following:

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

Side-note: As your audience for software will generally be global, please spell custom with an o :)

Collectives™ on Stack Overflow

how to make jquery plugin?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related