Jquery Web Widget

Creating a web widget with jquery.

HTML

<div id="example-widget-container"></div>
<div id="example-widget-container1"></div>

CSS

.outer {
    border:solid 1px;
    border-radius:5px;
    padding:5px;
    margin:5px;
}

JavaScript

//http://learn.jquery.com/plugins/basic-plugin-creation/

$(document).ready(function () {
    $("#example-widget-container").widgetify({
        multi: true,
        id: 'one'
    });

    $("#example-widget-container").widgetify({
        multi: false,
        id: 'two'
    });
});

(function ($) {

    $.fn.widgetify = function (options) {
        var defaults = {
            multi: false
        };
        var settings = $.extend({}, defaults, options);

        return this.each(function () {
            //create all dom elements here
            this.template = $("<div class='outer' id='" + settings.id + "'>Sample Class</div>");
            this.textbox = $("<input type='text' name='sample' id='sample' />");
            this.textarea = $("<textarea name='sampletextarea' id='sampletextarea'></textarea>");
            this.go = $("<input type='button' name='" + settings.id + "_go' id='" + settings.id + "_go' value='Go' />");

            //append all dom elements here
            if (settings.multi) {
                $(this.template).append(this.textarea);
            } else {
                $(this.template).append(this.textbox);
            }
            $(this.template).append(this.go);
            $(this).append(this.template);

            //all events stuff here
            this.go.on('click', $.proxy(function () {
                //use original 'this'
                alert($(this.textarea).val());
            }, this));

            return this;
        });
    }

}(jQuery));