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> 

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

Answer 2

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

eg

// "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 :)