From f453909f390f88664cc590fe3f1fa3c0df041200 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Jun 2012 21:48:41 -0700 Subject: add a dropdowns section to Components (still needs work) and reformat much of the js docs --- docs/javascript.html | 254 +++++++++++++++++++++++++++++---------------------- 1 file changed, 146 insertions(+), 108 deletions(-) (limited to 'docs/javascript.html') diff --git a/docs/javascript.html b/docs/javascript.html index b83612d52..e362985ab 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -151,10 +151,11 @@ -

About modals

-

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

+

Examples

+

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

Static example

+

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

@@ -223,13 +224,40 @@
Launch demo modal
+
+<-- Button to trigger modal -->
+<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
+
+<-- Modal -->
+<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal">×</button>
+    <h3 id="myModalLabel">Modal header</h3>
+  </div>
+  <div class="modal-body">
+    <p>One fine body…</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#" role="button" class="btn">Close</a>
+    <a href="#" role="button" class="btn btn-primary">Save changes</a>
+  </div>
+</div>
+

Usage

-

Call the modal via javascript:

+ +

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.

+
+<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+
+ +

Via javascript

+

Call a modal with id myModal with a single line of javascript:

$('#myModal').modal(options)

Options

@@ -270,32 +298,7 @@ -

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" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

-

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

-
-<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a>
-
- -
-<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal">×</button>
-    <h3 id="myModalLabel">Modal header</h3>
-  </div>
-  <div class="modal-body">
-    <p>One fine body…</p>
-  </div>
-  <div class="modal-footer">
-    <a href="#" role="button" class="btn">Close</a>
-    <a href="#" role="button" class="btn btn-primary">Save changes</a>
-  </div>
-</div>
-
-
- Heads up! 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) and include bootstrap-transition.js. -

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

@@ -355,12 +358,11 @@ $('#myModal').on('hidden', function () {

Dropdowns bootstrap-dropdown.js

-

About dropdowns

-

Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.

Examples

-

Click on the dropdown nav links in the navbar and pills below to test dropdowns.

+

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

+

Within a navbar

+

Within tabs

  • Regular link
    • @@ -441,49 +444,39 @@ $('#myModal').on('hidden', function () {
-
-

Using bootstrap-dropdown.js

-

Call the dropdowns via javascript:

- 
$('.dropdown-toggle').dropdown()
-

Markup

-

To quickly add dropdown functionality to any element just add data-toggle="dropdown" and any valid bootstrap dropdown will automatically be activated.

-
- Heads up! You may optionally target a specific dropdown by using data-target="#fat" or href="#fat". -
+
+ +

Usage

+ +

Via data attributes

+

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

-<ul class="nav nav-pills">
-  <li class="active"><a href="#">Regular link</a></li>
-  <li class="dropdown" id="menu1">
-    <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
-      Dropdown
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-      <li><a tabindex="-1" href="#">Action</a></li>
-      <li><a tabindex="-1" href="#">Another action</a></li>
-      <li><a tabindex="-1" href="#">Something else here</a></li>
-      <li class="divider"></li>
-      <li><a tabindex="-1" href="#">Separated link</a></li>
-    </ul>
-  </li>
-  ...
-</ul>
+<div class="dropdown"> + <a class="dropdown-toggle" href="#">Dropdown trigger</a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + ... + </ul> +</div> +

To keep URLs intact, use the data-target attribute instead of href="#".

-<ul class="nav nav-pills">
-  <li class="dropdown">
-    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-      Dropdown
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-      ...
-    </ul>
-  </li>
-</ul>
+<div class="dropdown">
+  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+    Dropdown
+    <b class="caret"></b>
+  </a>
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+ +

Via javascript

+

Call the dropdowns via javascript:

+ 
$('.dropdown-toggle').dropdown()
+

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

@@ -498,10 +491,9 @@ $('#myModal').on('hidden', function () {

ScrollSpy bootstrap-scrollspy.js

-

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.

-

Example navbar with scrollspy

-

Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!

+

Example in navbar

+

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

-
-

Using bootstrap-scrollspy.js

+ +
+ + +

Usage

+ +

Via data attributes

+

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use.

+ 
<body data-spy="scroll" data-target=".navbar">...</body>
+ +

Via javascript

Call the scrollspy via javascript:

$('#navbar').scrollspy()
-

Markup

-

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body).

- 
<body data-spy="scroll" >...</body>
+
Heads up! Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.
+

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

@@ -568,6 +558,7 @@ $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); +

Options

@@ -587,7 +578,8 @@ $('[data-spy="scroll"]').each(function () {
-

Events

+ +

Events

@@ -645,7 +637,11 @@ $('[data-spy="scroll"]').each(function () { -

Using bootstrap-tab.js

+ +
+ + +

Usage

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

 $('#myTab a').click(function (e) {
@@ -659,6 +655,7 @@ $('#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)
+

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.

@@ -668,6 +665,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
+

Methods

$().tab

@@ -693,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) $('#myTab a:last').tab('show'); }) </script> +

Events

@@ -737,9 +736,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

-

Using bootstrap-tooltip.js

+ +
+ + +

Usage

Trigger the tooltip via javascript:

$('#example').tooltip(options)
+

Options

@@ -803,6 +807,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes. +

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.

@@ -842,9 +847,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
     hover for popover
   
 
-  
Using bootstrap-popover.js

+
+  

+
+
+  
Usage

   
Enable popovers via javascript:

   
$('#example').popover(options)

+
   
Options
@@ -914,10 +924,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) { Heads up! Options for individual popovers can alternatively be specified through the use of data attributes. +

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

+

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.

@@ -964,18 +973,25 @@ $('a[data-toggle="tab"]').on('shown', function (e) { -

Using bootstrap-alert.js

+ +
+ + +

Usage

Enable dismissal of an alert via javascript:

$(".alert").alert()
+

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>
+

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')
+

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

@@ -1047,10 +1063,15 @@ $('#my-alert').bind('closed', function () { -

Using bootstrap-button.js

+ +
+ + +

Usage

Enable buttons via javascript:

$('.nav-tabs').button()
-

Markup

+ +

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

 <!-- Add data-toggle="button" to activate toggling on a single button -->
@@ -1070,6 +1091,7 @@ $('#my-alert').bind('closed', function () {
   <button class="btn">Right</button>
 </div>
+

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

@@ -1153,9 +1175,14 @@ $('#my-alert').bind('closed', function () { -

Using bootstrap-collapse.js

+ +
+ + +

Usage

Enable via javascript:

$(".collapse").collapse()
+

Options

@@ -1193,6 +1220,7 @@ $('#my-alert').bind('closed', function () { Heads up! To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action. +

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object. @@ -1206,10 +1234,9 @@ $('#myCollapsible').collapse({

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

+

Events

-

- Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -

+

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

@@ -1293,8 +1320,12 @@ $('#myCollapsible').on('hidden', function () { Heads up! When implementing this carousel, remove the images we have provided and replace them with your own. -
-

Using bootstrap-carousel.js

+ + +
+ + +

Usage

Call via javascript:

$('.carousel').carousel()

Options

@@ -1322,6 +1353,7 @@ $('#myCollapsible').on('hidden', function () {
+

Markup

Data attributes are used for the previous and next conrols. Check out the example markup below.

@@ -1337,6 +1369,7 @@ $('#myCollapsible').on('hidden', function () {
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 </div>
+

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

@@ -1355,6 +1388,7 @@ $('.carousel').carousel({

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

+

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

@@ -1395,7 +1429,11 @@ $('.carousel').carousel({ -

Using bootstrap-typeahead.js

+ +
+ + +

Usage

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

-- cgit v1.2.3