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

Question

I have developed the following jQuery code.

I have some questions:

What is the best programming pattern to develop a jQuery plugin?

How do I convert my code into a plugin? (I know it is possible to do what I am asking with
$.fn.function
, but what I don't understand is how to use it with an object.)

Should I learn and master a single programming pattern or do I have to learn patterns, all exists?

Here is my 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 my 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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You already have a working plugin, just have jquery interact with it.

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

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

$.animation is just a reference to the original plugin, and $.fn.animation is a wrapper so that you can call $(".link").animation({options here})

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

Sign up