Skip to content

B
bootstrap
Commit 46fe3838 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

rename tabs to tab - clean up lots of api stuff make href acceptable target val

parent 3925ea99
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 44 deletions
docs/javascript.html
View file @ 46fe3838
......@@ -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">
&lt;a class="btn" data-toggle="modal" data-target="#myModal" &gt;Launch Modal&lt;/a&gt;
&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt;
</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"> &lt;ul class="tabs" data-tabs="tabs" &gt;...&lt;/ul&gt;</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">
&lt;ul class="tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://twitter.com/fat"&gt;twitter&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</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">
&lt;ul class="tabs"&gt;
......@@ -470,7 +475,7 @@ $('#myModal').bind('hidden', function () {
&lt;script&gt;
$(function () {
$('.tabs').tabs()
$('.tabs a:last').tab('show')
})
&lt;/script&gt;</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">&lt;a href="#" rel='twipsy' title='twipsy text'&gt;@fat&lt;/a&gt;</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">&lt;a href="#" class="btn" rel="popover" title="A Title" data-content="Some content"&gt;
hover for popover
&lt;/a&gt;</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>
......
js/README.md
View file @ 46fe3838
......@@ -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"
......
js/bootstrap-collapse.js
View file @ 46fe3838
......@@ -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)
})
})
......
js/bootstrap-modal.js
View file @ 46fe3838
......@@ -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)
......
js/bootstrap-scrollspy.js
View file @ 46fe3838
......@@ -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()
......
js/bootstrap-tabs.js → js/bootstrap-tab.js
View file @ 46fe3838
......@@ -22,59 +22,81 @@
"use strict"
function activate ( element, container ) {
container
.find('> .active')
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
/* TAB CLASS DEFINITION
* ==================== */
element.addClass('active')
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
var Tab = function ( element ) {
this.element = $(element)
}
function tab( e ) {
var $this = $(this)
, $ul = $this.closest('ul:not(.dropdown-menu)')
, href = $this.attr('href')
, previous
, $href
Tab.prototype = {
if ( /^#\w+/.test(href) ) {
e.preventDefault()
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
}
if ( $this.parent('li').hasClass('active') ) return
previous = $ul.find('.active a').last()[0]
$this.trigger({
type: 'show'
, relatedTarget: previous
})
$href = $(href)
activate($this.parent('li'), $ul)
activate($href, $href.parent())
this.activate($this.parent('li'), $ul)
this.activate($href, $href.parent())
$this.trigger({
type: 'change'
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')
}
}
}
/* TABS/PILLS PLUGIN DEFINITION
* ============================ */
/* TAB PLUGIN DEFINITION
* ===================== */
$.fn.tabs = $.fn.pills = function ( selector ) {
$.fn.tab = function (option) {
return this.each(function () {
$(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
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').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
$('body').delegate('[data-toggle="tab"], [data-toggle="pill"]', 'click.tab.data-api', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
}( window.jQuery || window.ender )
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment