Perfect jQuery Plugin Pattern

An example of a jQuery skeleton code that is extensible, destroyable, object oriented, and organized.

HTML

<script src="http://v3.javascriptmvc.com/jquery/jquery.js"></script>
<script src="http://v3.javascriptmvc.com/jquery/event/hashchange/hashchange.js"></script>
 <h2>Simple Tab</h2>
<ul id='simpleTab' class='ui-helper-clearfix'>
    <li><a href='#tabA'>Tab A</a></li>
    <li><a href='#tabB'>Tab B</a></li>
    <li><a href='#tabC'>Tab C</a></li>
</ul>
<div id='tabA' class='tab'>Tab A Content</div>
<div id='tabB' class='tab'>Tab B Content</div>
<div id='tabC' class='tab'>Tab C Content</div> 


<h2>Basic Tab</h2>
<p><a href="javascript://" id='create_destroy_tab' class='button'>Create Basic Tab</a></p>
<ul id='tabs' class='ui-helper-clearfix'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1' class='tab'>Tab 1 Content</div>
<div id='tab2' class='tab'>Tab 2 Content</div>
<div id='tab3' class='tab'>Tab 3 Content</div> 

<h2>History Tab</h2>
<p>
    <a href="javascript://" id='add_remove_history_tab' class='button'>Add History HTML</a>
    <a href="javascript://" id='create_destroy_history_tab' class='button' style="display:none">Create History Tab</a>
</p>
<div id='history'>
    <ul id='historytabs' class='ui-helper-clearfix'>
        <li><a href='#tab4'>Tab 4</a></li>
        <li><a href='#tab5'>Tab 5</a></li>
        <li><a href='#tab6'>Tab 6</a></li>
    </ul>
    <div id='tab4' class='tab'>Tab 4 Content</div>
    <div id='tab5' class='tab'>Tab 5 Content</div>
    <div id='tab6' class='tab'>Tab 6 Content</div> 
</div>

CSS

body { font-family: verdana }
ul { margin: 10px 0px; }
h2 {font-size: 25px;padding-top: 20px; padding-bottom: 10px;}
h2 a, a.button { color: red }
h2 a:hover, a.button:hover { color: green }
li { margin-left: 10px;list-style-type: disc;}
.tabs { padding: 0px; margin: 0px; }
.tabs li { float: left; padding: 10px; background-color: #F6F6F6; list-style: none; margin-left: 10px; }
.tabs li a { color: #1C94C4; font-weight: bold; text-decoration: none; }
.tabs li.active a { color: #F6A828; cursor: default; }
.tab { border: solid 1px #F6A828; }
/* clearfix from jQueryUI */
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */

JavaScript

/**
 * A very basic tab.
 * This is about as light of jQuery tab as you can have.
 * But good luck using any of its code!
 */
(function() {
    // returns the tab content for a tab
    var tab = function(li) {
        return $(li.find("a").attr("href"))
    },
    // deactivates the old active tab, marks the li as active
    activate = function(li) {
        tab(li.siblings('.active').removeClass('active')).hide()
        tab(li.addClass('active')).show();
    },
    // activates the tab on click
    tabClick = function(ev) {
        ev.preventDefault();
        activate($(ev.currentTarget))
    }
    // a simple tab plugin
    $.fn.simpleTab = function() {

        this.each(function() {
            var el = $(this);

            el.addClass("tabs").delegate("li", "click", tabClick)
                .children("li:gt(0)")
                .each(function() {
                    tab($(this)).hide();
                });

            activate(el.children("li:first"))
        })
    }
})();

/**
 * Triggers a destroyed event when an element is removed via the jQuery modifiers
 */
(function() {
    var oldClean = jQuery.cleanData

    $.cleanData = function(elems) {
        for (var i = 0, elem;
        (elem = elems[i]) != null; i++) {
            $(elem).triggerHandler("destroyed")
            //$.event.remove( elem, 'destroyed' );
        }
        oldClean(elems)
    }
})();

// Creates a Namespace
Jptr = {};

// A Basic Tab Constructor function
Jptr.Tabs = function(el, options) {
    // if we don't have arguments, we're inheriting
    if (el) {
        this.init(el, options)
    }
}
// Extend the prototype
$.extend(Jptr.Tabs.prototype, {
   
    // the name of the plugin, where it will be saved in jQuery.data
    name: "jptr_tabs",
    
    // Sets up the tabs widget
    init: function(el, options) {
        // save this element for faster queries
        this.element = $(el);
        
        // save options if there are any
        this.options = options;
       ...