jQuery Plugin Skeleton

Question

Looking at jQuery's Plugins/Authoring documentation I find some questions. I need to create a plugin that lets me do the following:

$('#one').plug({foo:'bar'});
$('#two').plug();

According to the docs I should:

(function($){

    var settings = {
        foo:''
    };
    var methods = {
        init:function(options){
            return this.each(function(){
                $.extend(settings, options);

                //------ Problem ----------//
                alert(settings.foo);

            });
        }
    };
    $.fn.plug = function(method){
        //...
    }

})(jQuery);

Problem : $('#one').plug({foo:'bar'}); alerts "bar" as expected but the next line doesn't return an empty string it return "bar" too.

Answer 1

I use the following template for jquery plugins

(function($, window, document, undefined){
    $.fn.wolmVerticalSplitSlider = function(options) {
        var settings = $.extend({
            refreshFrequency: 5000,
        }, options );
        function Instance(comp){
            this.comp = comp;
        }
        Instance.prototype.init = function(){
            this.comp.html('Hello world!' + settings.refreshFrequency)
        }
        
        return this.each(function() {
            var component = new Instance($(this));
            component.init();
        });
    };

})(jQuery, window, document);

where wolmVerticalSplitSlider is plugin Name refreshFrequency is a plugin attribute

to use the plugin

$( document ).ready(
    function () {
        $('.vertical-slider').wolmVerticalSplitSlider({refreshFrequency: 1000});
    }
);

Answer 2

Thought I should post this out for anyone with the same question. There are many ways to create a jQuery plugin. The one I now use frequently is a this skeleton:

(function($, window, document, undefined){

    function Skeleton(element, options){
        this.$element = $(element);
        this.options = options;

        // Plugin init goes here...

    }

    Skeleton.prototype = {
        // Plugin methods
        sampleMethod: function(){
            // ...
        }

    };
    // Plugin Definition //
    $.fn.skeleton = function(options){
        if( typeof options == 'string'){
            var plugin = this.data('skeleton');
            if(plugin){
                var r = plugin[options].apply(plugin, Array.prototype.slice.call( arguments, 1 ) );
                if(r) return r
            }
            return this
        }

        options = $.extend({}, $.fn.skeleton.defaults, options);

        return this.each(function(){
            var plugin = $.data(this, 'skeleton');
            if( ! plugin ){
                plugin = new Skeleton(this, options);
                $.data(this, 'skeleton', plugin);
            }
        });
    };
    $.fn.skeleton.defaults = {
        // Plugin options ...
    };

})(jQuery, window, document);