From a0203bc8e0aa79b8f8cfd8c082c4256bed29ae5b Mon Sep 17 00:00:00 2001 From: Marcus Bointon Date: Wed, 21 Mar 2012 11:20:56 +0100 Subject: Fix and improve docs on tab config --- docs/javascript.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/javascript.html b/docs/javascript.html index a90562767..739e2475f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -638,6 +638,11 @@ $('#myModal').on('hidden', function () {

Using bootstrap-tab.js

Enable tabbable tabs via javascript:

$('#myTab').tab('show')
+

You can also activate a specific tab (or a pseudo-selected one) on init:

+
+$('#myTab a[href="#profile"]').tab('show');
+$('#myTab a:last').tab('show');
+

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

@@ -653,7 +658,7 @@ $('#myModal').on('hidden', function () {
             Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
           

 
-<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 +674,7 @@ $('#myModal').on('hidden', function () {
 
 <script>
   $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show')
   })
 </script>

           
Events

-- 
cgit v1.2.3


From 02a67ea59eb8ee28ba4220898c1a0b2052a80915 Mon Sep 17 00:00:00 2001
From: Marcus Bointon 
Date: Wed, 21 Mar 2012 11:28:23 +0100
Subject: Add note about styling tabs Fix typo in popover docs

---
 docs/javascript.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs')

diff --git a/docs/javascript.html b/docs/javascript.html
index 739e2475f..c9b94a3ca 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -644,7 +644,7 @@ $('#myTab a[href="#profile"]').tab('show');
 $('#myTab a:last').tab('show');

Markup

-

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

+

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.

 <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">Home</a></li>
@@ -898,7 +898,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           
           
Markup

           

-          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.
           

           
Methods

           
$().popover(options)

-- 
cgit v1.2.3


From 2f06366399f1b0572b0dbcbadcf06df9e4867f2b Mon Sep 17 00:00:00 2001
From: Marcus Bointon 
Date: Wed, 21 Mar 2012 12:09:00 +0100
Subject: Make changes in page templates, rebuild

---
 docs/assets/bootstrap.zip                | Bin 55592 -> 50100 bytes
 docs/assets/css/bootstrap-responsive.css |   4 ++--
 docs/templates/pages/javascript.mustache |  13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index d6ecc5869..789d41cb3 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index d9fa91d6c..0bc6de916 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -169,9 +169,9 @@
     width: 100%;
     min-height: 28px;
     /* Make inputs at least the height of their button counterpart */
-
+  
     /* Makes inputs behave like true block-level elements */
-
+  
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 7fd4c98d0..b61a0d424 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -562,8 +562,13 @@ $('#myModal').on('hidden', function () {
           
{{_i}}Using bootstrap-tab.js{{/i}}

           
{{_i}}Enable tabbable tabs via javascript:{{/i}}

           
$('#myTab').tab('show')

+          
{{_i}}You can also activate a specific tab (or a pseudo-selected one) on init:{{/i}}

+
+$('#myTab a[href="#profile"]').tab('show');
+$('#myTab a:last').tab('show');
+

           
{{_i}}Markup{{/i}}

-          
{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}

+          
{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.{{/i}}

 
 <ul class="nav nav-tabs">
   <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
@@ -577,7 +582,7 @@ $('#myModal').on('hidden', function () {
             {{_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}}
           

 
-<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 +598,7 @@ $('#myModal').on('hidden', function () {
 
 <script>
   $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show')
   })
 </script>

           
{{_i}}Events{{/i}}

@@ -817,7 +822,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           
           
{{_i}}Markup{{/i}}

           

-          {{_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}}
           

           
{{_i}}Methods{{/i}}

           
$().popover({{_i}}options{{/i}})

-- 
cgit v1.2.3


From cfce34e3000b2c02549e3af280668afea61fa752 Mon Sep 17 00:00:00 2001
From: Marcus Bointon 
Date: Thu, 22 Mar 2012 20:36:49 +0100
Subject: Add more examples for activating tabs Make naming of tab id
 consistent

---
 docs/assets/bootstrap.zip                | Bin 50100 -> 50100 bytes
 docs/javascript.html                     |  10 ++++++----
 docs/templates/pages/javascript.mustache |  10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'docs')

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 789d41cb3..716a5d509 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 c9b94a3ca..f2d23ef52 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -609,7 +609,7 @@ $('#myModal').on('hidden', function () {
         

           
Example tabs

           
Click the tabs below to toggle between hidden panes, even via dropdown menus.

-          

           

           
{{_i}}Using bootstrap-tab.js{{/i}}

-          
{{_i}}Enable tabbable tabs via javascript:{{/i}}

-          
$('#myTab').tab('show')

-          
{{_i}}You can select individual tabs in several ways:{{/i}}

+          
{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}

+          
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})

+          
{{_i}}You can activate individual tabs in several ways:{{/i}}

 
 $('#myTab a[href="#profile"]').tab('show'); //Select tab by name
 $('#myTab a:first').tab('show'); //Select first tab
-- 
cgit v1.2.3