tabssss

diff --git a/docs/assets/js/bootstrap-tabs.js b/docs/assets/js/bootstrap-tabs.js
new file mode 100644 (file)
index 0000000..55fdc7e
--- /dev/null
+++ b/docs/assets/js/bootstrap-tabs.js
@@ -0,0 +1,35 @@
+(function( $ ){
+
+  function activate ( element, container ) {
+    container.find('.active').removeClass('active')
+               element.addClass('active')
+  }
+
+  function tab( e ) {
+    debugger
+               var $this = $(this)
+                 , href = $this.attr('href')
+
+               if (/^#/.test(href)) {
+                       e.preventDefault()
+
+      if ($this.hasClass('active')) {
+        return
+      }
+
+      activate($this, $ul)
+      activate($(href), $content)
+               }
+  }
+
+
+ /* TABS PLUGIN DEFINITION
+  * ====================== */
+
+  $.fn.tabs = function ( content ) {
+    return this.each(function () {
+      $(this).delegate('> li > a', 'click', tab)
+    })
+  }
+
+})( jQuery || ender )
\ No newline at end of file

diff --git a/docs/javascript.html b/docs/javascript.html
index 8765b57708c6937bd7757e8bfd19b61363ec201c..5ece999ec717fdc0d72c20a22284d17dc04cade7 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -233,6 +233,72 @@ $('#modal-content').modal({
       </div>
     </section>
 
+    <!-- Tabs
+    ================================================== -->
+
+    <section id="tabs">
+      <div class="page-header">
+        <h1>Tabs <small>bootstrap-tabs.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>This plugin is for adding simple dynamic tab functionality.</p>
+          <a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using boostrap-tabs.js</h2>
+          <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+          <h3>Method</h3>
+          <h4>$().dropdown</h4>
+          <p>
+          Activates menus for given topbar navigation.
+          </p>
+          <h3>Demo</h3>
+          <script>
+            $(function () {
+              $('#tab').tab('.tab-container')
+            })
+          </script>
+          <div class="topbar-wrapper">
+            <div id="topbar-example" class="topbar">
+              <div class="fill">
+                <div class="container">
+                  <h3><a href="#">Project Name</a></h3>
+                  <ul>
+                    <li><a href="#">Link</a></li>
+                    <li><a href="#">Link</a></li>
+                  </ul>
+                  <form action="">
+                    <input type="text" placeholder="Search" />
+                  </form>
+                  <ul class="nav secondary-nav">
+                    <li class="menu">
+                      <a href="#" class="menu">Dropdown 1</a>
+                      <ul class="menu-dropdown">
+                        <li><a href="#">Secondary link</a></li>
+                        <li><a href="#">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li><a href="#">Another link</a></li>
+                      </ul>
+                    </li>
+                    <li class="menu">
+                      <a href="#" class="menu">Dropdown 2</a>
+                      <ul class="menu-dropdown">
+                        <li><a href="#">Secondary link</a></li>
+                        <li><a href="#">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li><a href="#">Another link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Tips
     ================================================== -->