From 46fe38386afce7149810b1feb534726735ce28b2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 27 Nov 2011 17:04:55 -0800 Subject: rename tabs to tab - clean up lots of api stuff make href acceptable target val --- docs/javascript.html | 89 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 51 insertions(+), 38 deletions(-) (limited to 'docs/javascript.html') diff --git a/docs/javascript.html b/docs/javascript.html index e57e45223..833e6ec02 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -28,12 +28,12 @@ - + - + @@ -127,7 +127,7 @@ The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar. - bootstrap-tabs.js + bootstrap-tab.js This plugin adds quick, dynamic tab and pill functionality for cycling through local content. @@ -204,9 +204,9 @@

Markup

-

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" 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.

+

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" 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.

-<a class="btn" data-toggle="modal" data-target="#myModal" >Launch Modal</a>
+<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Notice If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action).

Methods

@@ -274,9 +274,9 @@ $('#myModal').bind('hidden', function () { - + @@ -435,23 +435,28 @@ $('#myModal').bind('hidden', function () {
-

Tabs bootstrap-tabs.js

+

Tabs bootstrap-tab.js

This plugin adds quick, dynamic tab and pill functionality.

- Download + Download
-

Using boostrap-tabs.js

- 
$('.tabs').tabs()
+

Using boostrap-tab.js

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

Markup

-

You can activate a tab or pill navigation without writing any javascript by simply giving them a data-tabs or data-pills attribute.

- 
 <ul class="tabs" data-tabs="tabs" >...</ul>
+

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.

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

Methods

-

$().tabs or $().pills

+

$().tab

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

 <ul class="tabs">
@@ -470,7 +475,7 @@ $('#myModal').bind('hidden', function () {
 
 <script>
   $(function () {
-    $('.tabs').tabs()
+    $('.tabs a:last').tab('show')
   })
 </script>

@@ -484,28 +489,32 @@ $('#myModal').bind('hidden', function () { - change - This event fires on tab change. Use event.target and event.relatedTarget to target the active tab and the previous active tab respectively. + show + This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. + + + show + This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. 
-$('.tabs a').bind('change', function (e) {
+$('a[data-toggle="tab"]').bind('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
 })

Demo

-
    -
  • Home
    • -
  • Profile
    • -
  • Messages
    • -
  • Settings
    • + @@ -603,8 +612,7 @@ $('.tabs a').bind('change', function (e) {

    Notice Individual twipsy instance options can alternatively be specified through the use of data attributes.

    Markup

    -

    Twipsy's should contain a title tag which will be use to fill the tip content.

    - 

    <a href="#" rel='twipsy' title='twipsy text'>@fat</a>
    + 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. :)

    Methods

    $().twipsy(options)

    Attaches a twipsy handler to an element collection.

    @@ -689,10 +697,9 @@ $('.tabs a').bind('change', function (e) {

    Notice Individual popover instance options can alternatively be specified through the use of data attributes.

    Markup

    -

    Popover's should contain a title tag and a data-content attribute.

    -

    <a href="#" class="btn" rel="popover" title="A Title" data-content="Some content">
-  hover for popover
-</a>
    +

    + 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. :) +

    Methods

    $().popover(options)

    Initializes popovers for an element collection.

    @@ -967,24 +974,30 @@ $('#myCollapsible').bind('hidden', function () {
    -
    - Collapsible Group Item #1 +
    + + Collapsible Group Item #1 +

    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.

    -
    - Collapsible Group Item #2 +
    + + Collapsible Group Item #2 +

    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.

    -
    - Collapsible Group Item #3 +
    + + Collapsible Group Item #3 +

    -- cgit v1.2.3