Sample JQuery Widget v2

Widgets v2

by shelbyz

HTML

<h2>Hello Widget</h2>

<div>
    <p>Just some test elements for default class styling</p>
    <p class="haxxWidget">Element One</p>
    <p class="haxxWidget">Element Two</p>
</div>

<br/><br/>

<div>
    <p>Just some test elements for id styling</p>
    <p id="elementOne">Element One</p>
</div>

<br/><br/>

<div>
    <p>Just some test elements for element styling</p>
    <p id="anotherElementOne">Element One</p>
</div>

<br/><br/>

<div>
    <p>Just some test elements for class styling</p>
    <p class="test">Element One</p>
    <p class="test">Element Two</p>
</div>

JavaScript

//debugger;

(function($) {
    $.widget("ui.haxxWidget", {
        options: {
            autoOpen: true
        },
        
        _create: function() {
            // remember this instance
            $.ui.haxxWidget.instances.push(this.element);
        },
        
        _init: function() {            
            this.render();
        },
        
        render: function() {
            this.element.append("<p>Inserted Widget Data</p>");
            
            return this;
        },

        destroy: function() {            
            // call the original destroy method since we overwrote it
            $.Widget.prototype.destroy.call(this);
        }
    });

    $.extend($.ui.haxxWidget, {
        instances: []
    });
})(jQuery);

WidgetLib = function($) {
    return {
        init: function(options)
        {
            var element = null;
            
            if(options !== undefined && options !== null) {
                if(options.element !== undefined && options.element !== null) {
                    element = options.element;
                }
                else if(options.id !== undefined && options.id !== null) {
                    element = $("#" + options.id);
                }
                else if(options.elementClass !== undefined && options.elementClass !== null) {
                    element = $("." + options.elementClass);
                }
                else {
                    element = $(".haxxWidget");
                }
            }
            else {
                element = $(".haxxWidget");
            }
            
            element.haxxWidget();
        }
    };
}(jQuery);

WidgetLib.init(null);

var idOptions = {
    id: "elementOne"
};

WidgetLib.init(idOptions);


var elementOptions = {
    element: $("#anotherElementOne")
};

WidgetLib.init(elementOptions);

var classOptions = {
    elementClass: "test"
};

WidgetLib.init(classOptions);