diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 49ccf75ec0d234e4eff70db5fcf50f17c006d5da..693969290b7dda5a5f316d1647e7773669d1ca4a 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/javascript.html b/docs/javascript.html index a90562767e32186d12605d2cbbf83a552348a128..f0382bf49db75c5c813fd0d633b51f82af0d0f9b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -609,7 +609,7 @@ $('#myModal').on('hidden', function () { <div class="span9 columns"> <h2>Example tabs</h2> <p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p> - <ul id="tab" class="nav nav-tabs"> + <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> @@ -636,10 +636,21 @@ $('#myModal').on('hidden', function () { </div> <hr> <h2>Using bootstrap-tab.js</h2> - <p>Enable tabbable tabs via javascript:</p> - <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> + <p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p> + <pre class="prettyprint linenums"> +$('#myTab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); +})</pre> + <p>You can activate individual tabs in several ways:</p> +<pre class="prettyprint linenums"> +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name +$('#myTab a:first').tab('show'); // Select first tab +$('#myTab a:last').tab('show'); // Select last tab +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) +</pre> <h3>Markup</h3> - <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> + <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. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.</p> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> @@ -650,10 +661,10 @@ $('#myModal').on('hidden', function () { <h3>Methods</h3> <h4>$().tab</h4> <p> - Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. + Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. </p> <pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> @@ -669,7 +680,7 @@ $('#myModal').on('hidden', function () { <script> $(function () { - $('.tabs a:last').tab('show') + $('#myTab a:last').tab('show'); }) </script></pre> <h3>Events</h3> @@ -893,7 +904,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>Markup</h3> <p> - For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. + For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option. </p> <h3>Methods</h3> <h4>$().popover(options)</h4> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 7fd4c98d0211f26c2f579d8621dc15dee29db879..01fcb976199a25ce8d9633655cd08c98fbea0f3d 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -533,7 +533,7 @@ $('#myModal').on('hidden', function () { <div class="span9 columns"> <h2>{{_i}}Example tabs{{/i}}</h2> <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p> - <ul id="tab" class="nav nav-tabs"> + <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li> <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li> <li class="dropdown"> @@ -560,10 +560,21 @@ $('#myModal').on('hidden', function () { </div> <hr> <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2> - <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p> - <pre class="prettyprint linenums">$('#myTab').tab('show')</pre> + <p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p> + <pre class="prettyprint linenums"> +$('#myTab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); +})</pre> + <p>{{_i}}You can activate individual tabs in several ways:{{/i}}</p> +<pre class="prettyprint linenums"> +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name +$('#myTab a:first').tab('show'); // Select first tab +$('#myTab a:last').tab('show'); // Select last tab +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) +</pre> <h3>{{_i}}Markup{{/i}}</h3> - <p>{{_i}}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.{{/i}}</p> + <p>{{_i}}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. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.{{/i}}</p> <pre class="prettyprint linenums"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li> @@ -574,10 +585,10 @@ $('#myModal').on('hidden', function () { <h3>{{_i}}Methods{{/i}}</h3> <h4>$().tab</h4> <p> - {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}} + {{_i}}Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.{{/i}} </p> <pre class="prettyprint linenums"> -<ul class="nav nav-tabs"> +<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li> <li><a href="#profile">{{_i}}Profile{{/i}}</a></li> <li><a href="#messages">{{_i}}Messages{{/i}}</a></li> @@ -593,7 +604,7 @@ $('#myModal').on('hidden', function () { <script> $(function () { - $('.tabs a:last').tab('show') + $('#myTab a:last').tab('show'); }) </script></pre> <h3>{{_i}}Events{{/i}}</h3> @@ -817,7 +828,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>{{_i}}Markup{{/i}}</h3> <p> - {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}} + {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}} </p> <h3>{{_i}}Methods{{/i}}</h3> <h4>$().popover({{_i}}options{{/i}})</h4>