diff options
| author | Jacob Thornton <[email protected]> | 2011-09-08 19:13:08 -0700 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2011-09-08 19:13:08 -0700 |
| commit | 8d2f14d8d0bfef3b472be7b7770177fad26d5068 (patch) | |
| tree | f150dd2f69542b5a15545a6f0d74890a4957f223 /docs | |
| parent | fb8987148aeae4b9aa2b4c28fa3ad5346b8c56b1 (diff) | |
| download | bootstrap-8d2f14d8d0bfef3b472be7b7770177fad26d5068.tar.xz bootstrap-8d2f14d8d0bfef3b472be7b7770177fad26d5068.zip | |
tabssss
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/js/bootstrap-tabs.js | 35 | ||||
| -rw-r--r-- | docs/javascript.html | 66 |
2 files changed, 101 insertions, 0 deletions
diff --git a/docs/assets/js/bootstrap-tabs.js b/docs/assets/js/bootstrap-tabs.js new file mode 100644 index 000000000..55fdc7e08 --- /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 8765b5770..5ece999ec 100644 --- 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 ================================================== --> |