javascript - How to convert jQuery code into a plugin? and plugin development patterns -


i have developed following jquery code.

i have questions:

  1. what best programming pattern develop jquery plugin?
  2. how convert code plugin? (i know possible asking $.fn.function, don't understand how use object.)
  3. should learn , master single programming pattern or have learn patterns, exists?

here html:

<ul class="linkcontainer">     <li><a href="#" class="link" data-link="one">one</a></li>     <li><a href="#" class="link" data-link="two">two</a></li>  <div class="moredetailssection" data-section="one">     chakabakas </div> <div class="moredetailssection" data-section="two">     sasjakjk </div> 

and javascript:

  (function ($) {       var animation = {         options: {             linkcontainer : $('.linkcontainer'),             section: $('.section'),             link : $('.link'),             maineffect: 'slidetoggle',             maineffectspeed: 300         },          init: function (options) {                                                    var link = this.options.link;              $.extend(this.options, options);              link.on('click', this.changewindow );         },          changewindow: function () {             var linkid = $(this).data('link'),                 options = animation.options,                 sectioncontainer = animation.options.section,                 elements = sectioncontainer,                 element = elements.filter('[data-section="'+ linkid +'"]');                                                       element[options.maineffect](options.maineffectspeed);                              }                  }              animation.init();    })(jquery); 

demo

you have working plugin, have jquery interact it.

$.animation = animation; $.fn.animation = function (options) {     return this.each(function () {         $.animation.init($.extend({             link:         }, options));     }); }; 

http://jsfiddle.net/8bmu6/1/

$.animation reference original plugin, , $.fn.animation wrapper can call $(".link").animation({options here})


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -