From 48c64127b37be4a692a70cb7b38ed9744163582b Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Wed, 30 Oct 2013 16:13:42 -0400 Subject: 3.0.0 -> 3.0.1 --- bower_components/bootstrap/javascript.html | 217 +++++++++++++++++++---------- 1 file changed, 144 insertions(+), 73 deletions(-) (limited to 'bower_components/bootstrap/javascript.html') diff --git a/bower_components/bootstrap/javascript.html b/bower_components/bootstrap/javascript.html index 62dbc07e..06a0bd02 100755 --- a/bower_components/bootstrap/javascript.html +++ b/bower_components/bootstrap/javascript.html @@ -24,7 +24,7 @@ base_url: "../"

Plugin dependencies

-

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

+

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.

Data attributes

@@ -104,6 +104,15 @@ $('#myModal').on('show.bs.modal', function (e) {

Examples

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

+
+

Overlapping modals not supported

+

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

+
+
+

Mobile device caveats

+

There are some caveats regarding using modals on mobile devices. See our browser support docs for details.

+
+

Static example

A rendered modal with header, body, and set of actions in the footer.

@@ -189,44 +198,45 @@ $('#myModal').on('show.bs.modal', function (e) {
- Launch demo modal +
{% highlight html %} - - Launch demo modal - - - + + + + + {% endhighlight %}

Make modals accessible

-

- Be sure to add role="dialog" to your primary modal div. In the example above, div#myModal.
- Also, the aria-labelledby attribute references your modal title. In this example, h4#myModalLabel.
- Finally, aria-hidden="true" tells assistive technologies to skip DOM elements.
- Additionally, you may give a description of your modal dialog. Use the aria-describedby attribute in the modal's primary <div> to point to this description (this is not shown in the above example). -

+

Be sure to add role="dialog" to .modal, aria-labelledby="myModalLabel" attribute to reference the modal title, and aria-hidden="true" to tell assistive technologies to skip the modal's DOM elements.

+

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Usage

+

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .model-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

@@ -253,7 +263,7 @@ $('#myModal').on('show.bs.modal', function (e) { backdrop - boolean + boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. @@ -273,10 +283,11 @@ $('#myModal').on('show.bs.modal', function (e) { remote path false -

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. If you're using the data api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

+

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

{% highlight html %} Click me {% endhighlight %} + @@ -443,6 +454,7 @@ $('#myModal').on('hidden.bs.modal', function () { +

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item. When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu.

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

@@ -460,6 +472,8 @@ $('#myModal').on('hidden.bs.modal', function () { Dropdown + + @@ -572,7 +586,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Usage

Via data attributes

-

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>. Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

+

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

{% highlight html %} ... @@ -686,6 +700,11 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () { +
+

Extends tabbed navigation

+

This plugin extends the tabbed navigation component to add tabbable areas.

+
+

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

@@ -705,17 +724,35 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) {% endhighlight %}

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. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

+

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, while adding the nav and nav-pills classes will apply pill styling.

{% highlight html %} + + + +
+
...
+
...
+
...
+
...
+
{% endhighlight %} -

To make tabs fade in, add .fade to each .tab-pane.

+

Fade effect

+

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content.

+{% highlight html %} +
+
...
+
...
+
...
+
...
+
+{% endhighlight %}

Methods

$().tab

@@ -724,10 +761,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

{% highlight html %}
@@ -800,16 +837,35 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+
+

Opt-in functionality

+

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

+

Tooltips in button groups and input groups require special setting

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

- +
+

Tooltips on disabled elements require wrapper elements

+

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

+

Usage

+

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

Trigger the tooltip via JavaScript:

{% highlight js %} $('#example').tooltip(options) +{% endhighlight %} + +

Markup

+

The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

+{% highlight html linenos %} +
+
+ Tooltip! +
+
+
{% endhighlight %}

Options

@@ -963,10 +1019,18 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {

Plugin dependency

Popovers require the tooltip plugin to be included in your version of Bootstrap.

+
+

Opt-in functionality

+

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

+

Popovers in button groups and input groups require special setting

When using popovers on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

+
+

Popovers on disabled elements require wrapper elements

+

To add a popover to a disabled or .disabled element, put the element inside of a <div> and apply the popover to that <div> instead.

+

Static popover

Four options are available: top, right, bottom, and left aligned.

@@ -990,6 +1054,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {

Popover bottom

+

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

@@ -1008,7 +1073,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {

Live demo

- Click to toggle popover + Click to toggle popover

Four directions

@@ -1069,7 +1134,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { selector string false - if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. + if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. trigger @@ -1115,9 +1180,6 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

-

Markup

-

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)

Initializes popovers for an element collection.

@@ -1191,12 +1253,13 @@ $('#myPopover').on('hidden.bs.popover', function () {
-
+

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

- Take this action Or do this + +

@@ -1345,7 +1408,7 @@ $('#my-alert').bind('closed.bs.alert', function () {

Usage

Enable buttons via JavaScript:

{% highlight js %} -$('.nav-tabs').button() +$('.btn-group').button() {% endhighlight %}

Markup

@@ -1416,7 +1479,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #1

@@ -1430,7 +1493,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #2

@@ -1444,7 +1507,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #3

@@ -1462,7 +1525,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #1

@@ -1476,7 +1539,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #2

@@ -1490,7 +1553,7 @@ $('.nav-tabs').button()

- + Collapsible Group Item #3

@@ -1515,6 +1578,13 @@ $('.nav-tabs').button()

Usage

+

The collapse plugin utilizes a few classes to handle the heavy lifting:

+
    +
  • .collapse hides the content
    • +
  • .collapse.in shows the content
    • +
  • .collapsing is added when the transition starts, and removed when it finishes
    • +
+

These classes can be found in component-animations.less.

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

@@ -1625,7 +1695,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

- {% highlight html %} -