Add jQuery plugin structure

javascripts/tabs.js

@@ -8,35 +8,33 @@
 */
 
 
-$(document).ready(function() {
+;(function ( $, window, document, undefined ) {
     
-	/* Tabs Activiation
+    var pluginName = 'skeletonTabs',
-	================================================== */
+        defaults = {
+            propertyName: "value"
+        };
 
-	var tabs = $('ul.tabs');
+    function Plugin( element, options ) {
+        this.element = element;
+        this.options = $.extend( {}, defaults, options) ;
  
-	tabs.each(function(i) {
+        this._defaults = defaults;
+        this._name = pluginName;
         
-		//Get all tabs
+        this.init();
-		var tab = $(this).find('> li > a');
+    }
-		tab.click(function(e) {
 
-			//Get Location of tab's content
+    Plugin.prototype.init = function () {
-			var contentLocation = $(this).attr('href');
 
-			//Let go if not a hashed one
+    };
-			if(contentLocation.charAt(0)=="#") {
 
-				e.preventDefault();
+    $.fn[pluginName] = function ( options ) {
+        return this.each(function () {
+            if (!$.data(this, 'plugin_' + pluginName)) {
+                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
+            }
+        });
+    }
 
-				//Make Tab Active
+})(jQuery, window, document);
-				tab.removeClass('active');
-				$(this).addClass('active');
-
-				//Show Tab Content & add active class
-				$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
-
-			}
-		});
-	});
-});

javascripts/tests/runner.html

@@ -9,7 +9,18 @@
         <div id="qunit-testrunner-toolbar"></div>
         <h2 id="qunit-userAgent"></h2>
         <ol id="qunit-tests"></ol>
-        <div id="qunit-fixture">test markup, will be hidden</div>
+        <div id="qunit-fixture">
+            <div role="tabpanel">
+                <ul>
+                    <li>Simple</li>
+                    <li>Lightweight</li>
+                    <li>Mobile</li>
+                </ul>
+                <div>The tabs are clean and simple divs and basic CSS.</div>
+                <div>The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</div>
+                <div>The tabs work like a charm even on mobile devices.</div>
+            </div>
+        </div>
     </body>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>