From f72a94ae2879ebfc5206dd40d5db175e13113850 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 20 Dec 2011 23:28:48 -0800 Subject: update more readme changes - introduce target specificty convention to more plugins --- docs/javascript.html | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) (limited to 'docs/javascript.html') diff --git a/docs/javascript.html b/docs/javascript.html index 45a7a2fe8..8a9a203e7 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -112,7 +112,7 @@

What's included

Bring some of Bootstrap's primary components to life with custom jQuery plugins. We encourage you to extend and modify them to fit your specific development needs.

- +
@@ -186,7 +186,7 @@

Using bootstrap-modal

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

Options

-
File
+
@@ -208,16 +208,11 @@ - - - - - -
Nametrue Closes the modal when escape key is pressed
showbooleantrueOpens modal on class initialization

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

+

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 class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
@@ -240,7 +235,7 @@ $('#myModal').modal({ 
$('#myModal').modal('hide')

Events

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

- +
@@ -311,12 +306,14 @@ $('#myModal').on('hidden', function () {

Using boostrap-dropdown.js

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

Markup

-

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

+

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

+

Notice For added control and flexibility, optionally specify a data-target="#fat" or href="#fat" - this allows you to target specific dropdowns.

+ 
 <ul class="tabs">
   <li class="active"><a href="#">Home</a></li>
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
+  <li id="secondary" class="dropdown">
+    <a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
     <ul class="dropdown-menu">
       <li><a href="#">Secondary link</a></li>
       <li><a href="#">Something else here</a></li>
@@ -343,7 +340,7 @@ $('#myModal').on('hidden', function () {

Events

-
Event
+
@@ -571,7 +568,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Using bootstrap-twipsy.js

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

Options

-
Event
+
@@ -661,7 +658,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Using boostrap-popover.js

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

Options

-
Name
+
@@ -834,7 +831,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { $('.btn').button('complete') </scrip>

Demo

-
Name
+
@@ -903,7 +900,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

Using bootstrap-collapse.js

$(".collapse").collapse()

Options

-
Stateful
+
@@ -953,7 +950,7 @@ $('#myCollapsible').collapse({

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

-
Name
+
-- cgit v1.2.3
Event