0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
This commit is contained in:
Jacob Thornton 2011-09-08 19:13:08 -07:00
parent fb8987148a
commit 8d2f14d8d0
2 changed files with 101 additions and 0 deletions

35
docs/assets/js/bootstrap-tabs.js vendored Normal file
View File

@ -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 )

View File

@ -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
================================================== -->