Sample JQuery Widget

Who doesn't like widgets? Borrowing a template from: https://raw.github.com/gist/374414/ca5305c394368f2963303fcba0f55a255724d043/widget-template.js

by shelbyz

HTML

<h2>Hello Widget</h2>

<p class="haxxWidget">Pre-Widget</p>

<p>Post-Widget</p>

JavaScript

(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);

$(".haxxWidget").haxxWidget();