mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
rename tabs to tab - clean up lots of api stuff make href acceptable target val
This commit is contained in:
Jacob Thornton
parent
3925ea9986
commit
46fe38386a
@ -28,12 +28,12 @@
|
||||
<script src="http://code.jquery.com/jquery-1.7.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-transitions.js"></script>
|
||||
<script src="../js/bootstrap-transition.js"></script>
|
||||
<script src="../js/bootstrap-alerts.js"></script>
|
||||
<script src="../js/bootstrap-modal.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../js/bootstrap-tabs.js"></script>
|
||||
<script src="../js/bootstrap-tab.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-buttons.js"></script>
|
||||
@ -127,7 +127,7 @@
|
||||
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
|
||||
<td><a href="./javascript.html#tabs">bootstrap-tab.js</a></td>
|
||||
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -204,9 +204,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
|
||||
<p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="btn" data-toggle="modal" data-target="#myModal" >Launch Modal</a>
|
||||
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
|
||||
</pre>
|
||||
<p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
|
||||
<h3>Methods</h3>
|
||||
@ -274,9 +274,9 @@ $('#myModal').bind('hidden', function () {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button data-toggle="modal" data-target="#myModal" class="btn danger">
|
||||
<a data-toggle="modal" href="#myModal" class="btn danger">
|
||||
Launch Modal
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -435,23 +435,28 @@ $('#myModal').bind('hidden', function () {
|
||||
|
||||
<section id="tabs">
|
||||
<div class="page-header">
|
||||
<h1>Tabs <small>bootstrap-tabs.js</small></h1>
|
||||
<h1>Tabs <small>bootstrap-tab.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>This plugin adds quick, dynamic tab and pill functionality.</p>
|
||||
<a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
|
||||
<a href="../js/bootstrap-tab.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using boostrap-tabs.js</h3>
|
||||
<pre class="prettyprint linenums">$('.tabs').tabs()</pre>
|
||||
<h3>Using boostrap-tab.js</h3>
|
||||
<pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
|
||||
<pre class="prettyprint linenums"> <ul class="tabs" data-tabs="tabs" >...</ul></pre>
|
||||
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<li><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="http://twitter.com/fat">twitter</a></li>
|
||||
</ul></pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tabs or $().pills</h4>
|
||||
<h4>$().tab</h4>
|
||||
<p>
|
||||
Activates tab and pill functionality for a given container. Tab links should reference id's in the document.
|
||||
Activates tab functionality for a given element controller. Tab should have either a `data-target` or an `href` referencing a node in the dom.
|
||||
</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
@ -470,7 +475,7 @@ $('#myModal').bind('hidden', function () {
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('.tabs').tabs()
|
||||
$('.tabs a:last').tab('show')
|
||||
})
|
||||
</script></pre>
|
||||
</p>
|
||||
@ -484,28 +489,32 @@ $('#myModal').bind('hidden', function () {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td>
|
||||
<td>show</td>
|
||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
$('.tabs a').bind('change', function (e) {
|
||||
$('a[data-toggle="tab"]').bind('shown', function (e) {
|
||||
e.target // activated tab
|
||||
e.relatedTarget // previous tab
|
||||
})</pre>
|
||||
<h3>Demo</h3>
|
||||
<ul class="tabs" data-tabs="tabs">
|
||||
<li class="active"><a href="#home">Home</a></li>
|
||||
<li><a href="#profile">Profile</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
<li><a href="#settings">Settings</a></li>
|
||||
<ul id="tab" class="tabs">
|
||||
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
||||
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#dropdown1">@fat</a></li>
|
||||
<li><a href="#dropdown2">@mdo</a></li>
|
||||
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
|
||||
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -603,8 +612,7 @@ $('.tabs a').bind('change', function (e) {
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>Twipsy's should contain a title tag which will be use to fill the tip content.<p>
|
||||
<pre class="prettyprint linenums"><a href="#" rel='twipsy' title='twipsy text'>@fat</a></pre>
|
||||
For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :)
|
||||
<h3>Methods</h3>
|
||||
<h4>$().twipsy(options)</h4>
|
||||
<p>Attaches a twipsy handler to an element collection.</p>
|
||||
@ -689,10 +697,9 @@ $('.tabs a').bind('change', function (e) {
|
||||
</table>
|
||||
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
|
||||
<h3>Markup</h3>
|
||||
<p>Popover's should contain a title tag and a data-content attribute.<p>
|
||||
<pre class="prettyprint linenums"><a href="#" class="btn" rel="popover" title="A Title" data-content="Some content">
|
||||
hover for popover
|
||||
</a></pre>
|
||||
<p>
|
||||
For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just set the live flag to true, however we recommend you know what you are doing if you do that. :)
|
||||
</p>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().popover(options)</h4>
|
||||
<p>Initializes popovers for an element collection.</p>
|
||||
@ -967,24 +974,30 @@ $('#myCollapsible').bind('hidden', function () {
|
||||
<div id="collapseDemoWrap" class="collapse">
|
||||
<!-- group collapse -->
|
||||
<dl id="accordion" >
|
||||
<dt data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion">
|
||||
<a href="#">Collapsible Group Item #1</a>
|
||||
<dt>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</dt>
|
||||
<dd id="collapseOne" class="collapse in">
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</p>
|
||||
</dd>
|
||||
<dt data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" >
|
||||
<a href="#">Collapsible Group Item #2</a>
|
||||
<dt>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</dt>
|
||||
<dd id="collapseTwo" class="collapse">
|
||||
<p>
|
||||
Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.
|
||||
</p>
|
||||
</dd>
|
||||
<dt data-toggle="collapse" data-target="#collapseThree" data-parent="#accordion" >
|
||||
<a href="#">Collapsible Group Item #3</a>
|
||||
<dt>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</dt>
|
||||
<dd id="collapseThree" class="collapse">
|
||||
<p>
|
||||
|
||||
@ -67,14 +67,14 @@ All events should have an infinitive and past participle form. The infinitive is
|
||||
Data attributes should take the following form:
|
||||
|
||||
data-*(verb)* - defines main interaction
|
||||
data-target - defined on controller element (if element interacts with an element other than self)
|
||||
data-target || href^=# - defined on controller element (if element interacts with an element other than self)
|
||||
data-*(noun)* - defines options for element invocation
|
||||
|
||||
examples:
|
||||
|
||||
// control other targets
|
||||
data-toggle="modal" data-target="#foo"
|
||||
data-toggle="view" data-target="#foo"
|
||||
data-toggle="collapse" data-target="#foo" data-parent="#foo"
|
||||
|
||||
// defined on element they control
|
||||
data-spy="scroll"
|
||||
|
||||
4
js/bootstrap-collapse.js
vendored
4
js/bootstrap-collapse.js
vendored
@ -117,9 +117,9 @@
|
||||
$(function () {
|
||||
$('body').delegate('[data-toggle=collapse]', 'click.collapse.data-api', function ( e ) {
|
||||
var $this = $(this)
|
||||
, target = $this.attr('data-target')
|
||||
, target = $this.attr('data-target') || $this.attr('href')
|
||||
, option = $(target).data('collapse') ? 'toggle' : $this.data()
|
||||
e.preventDefault()
|
||||
e.preventDefault()
|
||||
$(target).collapse(option)
|
||||
})
|
||||
})
|
||||
|
||||
2
js/bootstrap-modal.js
vendored
2
js/bootstrap-modal.js
vendored
@ -192,7 +192,7 @@
|
||||
$(document).ready(function () {
|
||||
$('body').delegate('[data-toggle="modal"]', 'click.modal.data-api', function ( e ) {
|
||||
var $this = $(this)
|
||||
, target = $this.attr('data-target')
|
||||
, target = $this.attr('data-target') || $this.attr('href')
|
||||
, option = $(target).data('modal') ? 'toggle' : $this.data()
|
||||
e.preventDefault()
|
||||
$(target).modal(option)
|
||||
|
||||
4
js/bootstrap-scrollspy.js
vendored
4
js/bootstrap-scrollspy.js
vendored
@ -28,7 +28,9 @@
|
||||
var process = $.proxy(this.process, this)
|
||||
|
||||
this.$scrollElement = $(element).bind('scroll.scroll.data-api', process)
|
||||
this.selector = (this.$scrollElement.attr('data-target') || '') + ' .nav li > a'
|
||||
this.selector = (this.$scrollElement.attr('data-target')
|
||||
|| this.$scrollElement.attr('href')
|
||||
|| '') + ' .nav li > a'
|
||||
this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process)
|
||||
|
||||
this.refresh()
|
||||
|
||||
102
js/bootstrap-tab.js
vendored
Normal file
102
js/bootstrap-tab.js
vendored
Normal file
@ -0,0 +1,102 @@
|
||||
/* ========================================================
|
||||
* bootstrap-tabs.js v2.0.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tabs
|
||||
* ========================================================
|
||||
* Copyright 2011 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ======================================================== */
|
||||
|
||||
|
||||
!function( $ ){
|
||||
|
||||
"use strict"
|
||||
|
||||
/* TAB CLASS DEFINITION
|
||||
* ==================== */
|
||||
|
||||
var Tab = function ( element ) {
|
||||
this.element = $(element)
|
||||
}
|
||||
|
||||
Tab.prototype = {
|
||||
|
||||
show: function () {
|
||||
var $this = this.element
|
||||
, $ul = $this.closest('ul:not(.dropdown-menu)')
|
||||
, href = $this.attr('data-target') || $this.attr('href')
|
||||
, previous
|
||||
, $href
|
||||
|
||||
if ( $this.parent('li').hasClass('active') ) return
|
||||
|
||||
previous = $ul.find('.active a').last()[0]
|
||||
|
||||
$this.trigger({
|
||||
type: 'show'
|
||||
, relatedTarget: previous
|
||||
})
|
||||
|
||||
$href = $(href)
|
||||
|
||||
this.activate($this.parent('li'), $ul)
|
||||
this.activate($href, $href.parent())
|
||||
|
||||
$this.trigger({
|
||||
type: 'shown'
|
||||
, relatedTarget: previous
|
||||
})
|
||||
}
|
||||
|
||||
, activate: function ( element, container ) {
|
||||
container
|
||||
.find('> .active')
|
||||
.removeClass('active')
|
||||
.find('> .dropdown-menu > .active')
|
||||
.removeClass('active')
|
||||
|
||||
element.addClass('active')
|
||||
|
||||
if ( element.parent('.dropdown-menu') ) {
|
||||
element.closest('li.dropdown').addClass('active')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* TAB PLUGIN DEFINITION
|
||||
* ===================== */
|
||||
|
||||
$.fn.tab = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('tab')
|
||||
if (!data) $this.data('tab', (data = new Tab(this)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.tab.Tab = Tab
|
||||
|
||||
|
||||
/* TAB DATA-API
|
||||
* ============ */
|
||||
|
||||
$(document).ready(function () {
|
||||
$('body').delegate('[data-toggle="tab"], [data-toggle="pill"]', 'click.tab.data-api', function (e) {
|
||||
e.preventDefault()
|
||||
$(this).tab('show')
|
||||
})
|
||||
})
|
||||
|
||||
}( window.jQuery || window.ender )
|
||||
80
js/bootstrap-tabs.js
vendored
80
js/bootstrap-tabs.js
vendored
@ -1,80 +0,0 @@
|
||||
/* ========================================================
|
||||
* bootstrap-tabs.js v2.0.0
|
||||
* http://twitter.github.com/bootstrap/javascript.html#tabs
|
||||
* ========================================================
|
||||
* Copyright 2011 Twitter, Inc.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ======================================================== */
|
||||
|
||||
|
||||
!function( $ ){
|
||||
|
||||
"use strict"
|
||||
|
||||
function activate ( element, container ) {
|
||||
container
|
||||
.find('> .active')
|
||||
.removeClass('active')
|
||||
.find('> .dropdown-menu > .active')
|
||||
.removeClass('active')
|
||||
|
||||
element.addClass('active')
|
||||
|
||||
if ( element.parent('.dropdown-menu') ) {
|
||||
element.closest('li.dropdown').addClass('active')
|
||||
}
|
||||
}
|
||||
|
||||
function tab( e ) {
|
||||
var $this = $(this)
|
||||
, $ul = $this.closest('ul:not(.dropdown-menu)')
|
||||
, href = $this.attr('href')
|
||||
, previous
|
||||
, $href
|
||||
|
||||
if ( /^#\w+/.test(href) ) {
|
||||
e.preventDefault()
|
||||
|
||||
if ( $this.parent('li').hasClass('active') ) {
|
||||
return
|
||||
}
|
||||
|
||||
previous = $ul.find('.active a').last()[0]
|
||||
$href = $(href)
|
||||
|
||||
activate($this.parent('li'), $ul)
|
||||
activate($href, $href.parent())
|
||||
|
||||
$this.trigger({
|
||||
type: 'change'
|
||||
, relatedTarget: previous
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* TABS/PILLS PLUGIN DEFINITION
|
||||
* ============================ */
|
||||
|
||||
$.fn.tabs = $.fn.pills = function ( selector ) {
|
||||
return this.each(function () {
|
||||
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
|
||||
})
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
|
||||
})
|
||||
|
||||
}( window.jQuery || window.ender )
|
||||
Loading…
x
Reference in New Issue
Block a user