From 46fe38386afce7149810b1feb534726735ce28b2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 27 Nov 2011 17:04:55 -0800 Subject: [PATCH] rename tabs to tab - clean up lots of api stuff make href acceptable target val --- docs/javascript.html | 89 ++++++++------- js/README.md | 4 +- js/bootstrap-collapse.js | 4 +- js/bootstrap-modal.js | 2 +- js/bootstrap-scrollspy.js | 4 +- js/bootstrap-tab.js | 102 ++++++++++++++++++ js/bootstrap-tabs.js | 80 -------------- ...transitions.js => bootstrap-transition.js} | 0 8 files changed, 161 insertions(+), 124 deletions(-) create mode 100644 js/bootstrap-tab.js delete mode 100644 js/bootstrap-tabs.js rename js/{bootstrap-transitions.js => bootstrap-transition.js} (100%) diff --git a/docs/javascript.html b/docs/javascript.html index e57e452236..833e6ec026 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 +

    diff --git a/js/README.md b/js/README.md index 98be75421d..5224d65b7b 100644 --- a/js/README.md +++ b/js/README.md @@ -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" diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 6de3d971a3..629d9b589e 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -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) }) }) diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js index dab67d1b23..5f543c5537 100644 --- a/js/bootstrap-modal.js +++ b/js/bootstrap-modal.js @@ -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) diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js index e4bfea4836..fe34019ffc 100644 --- a/js/bootstrap-scrollspy.js +++ b/js/bootstrap-scrollspy.js @@ -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() diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js new file mode 100644 index 0000000000..ba956cbe86 --- /dev/null +++ b/js/bootstrap-tab.js @@ -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 ) \ No newline at end of file diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js deleted file mode 100644 index bd49e130f2..0000000000 --- a/js/bootstrap-tabs.js +++ /dev/null @@ -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 ) \ No newline at end of file diff --git a/js/bootstrap-transitions.js b/js/bootstrap-transition.js similarity index 100% rename from js/bootstrap-transitions.js rename to js/bootstrap-transition.js