diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 51 |
1 files changed, 28 insertions, 23 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 7960a29e3..612724c79 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -7,17 +7,17 @@ <meta name="description" content=""> <meta name="author" content=""> - <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> - <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> - <![endif]--> - <!-- Le styles --> <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/docs.css" rel="stylesheet"> <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet"> + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + <!-- Le fav and touch icons --> <link rel="shortcut icon" href="assets/ico/favicon.ico"> <link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png"> @@ -134,7 +134,7 @@ <div class="span3"> <label> <h3><a href="./javascript.html#tooltips">Tooltips</a></h3> - <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p> + <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p> </label> </div> <div class="span3"> @@ -289,7 +289,7 @@ </pre> <pre class="prettyprint linenums"> -<div class="modal"> +<div class="modal" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modal header</h3> @@ -630,11 +630,11 @@ $('#myModal').on('hidden', function () { <h3>Markup</h3> <p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p> <pre class="prettyprint linenums"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#ettings" data-toggle="tab">Settings</a></li> + <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul></pre> <h3>Methods</h3> <h4>$().tab</h4> @@ -642,7 +642,7 @@ $('#myModal').on('hidden', function () { Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom. </p> <pre class="prettyprint linenums"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> @@ -700,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <div class="row"> <div class="span3 columns"> <h3>About Tooltips</h3> - <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p> <a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> <h2>Example use of Tooltips</h2> <p>Hover over the links below to see tooltips:</p> <div class="tooltip-demo well"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. + <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> <hr> @@ -733,7 +733,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> <tr> <td>placement</td> - <td>string</td> + <td>string|function</td> <td>'top'</td> <td>how to position the tooltip - top | bottom | left | right</td> </tr> @@ -773,6 +773,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </div> <h3>Markup</h3> <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> +<pre class="prettyprint linenums"> +<a href="#" rel="tooltip" title="first tooltip">hover over me</a> +</pre> <h3>Methods</h3> <h4>$().tooltip(options)</h4> <p>Attaches a tooltip handler to an element collection.</p> @@ -801,7 +804,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <div class="span3 columns"> <h3>About popovers</h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> - <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p> + <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p> <a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> @@ -833,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> <tr> <td>placement</td> - <td>string</td> + <td>string|function</td> <td>'right'</td> <td>how to position the popover - top | bottom | left | right</td> </tr> @@ -923,11 +926,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h4 class="alert-heading">Oh snap! You got an error!</h4> <p>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.</p> <p> - <a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> + <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a> </p> </div> <hr> - <h2>Using bootstrap-alerts.js</h2> + <h2>Using bootstrap-alert.js</h2> <p>Enable dismissal of an alert via javascript:</p> <pre class="prettyprint linenums">$(".alert").alert()</pre> <h3>Markup</h3> @@ -1048,7 +1051,7 @@ $('#my-alert').bind('closed', function () { </pre> <h3>Methods</h3> <h4>$().button('toggle')</h4> - <p>Toggles push state. Gives btn the look that it's been activated.</p> + <p>Toggles push state. Gives btn the look that it hass been activated.</p> <div class="alert alert-info"> <strong>Heads up!</strong> You can enable auto toggling of a button by using the <code>data-toggle</code> attribute. @@ -1151,7 +1154,7 @@ $('#my-alert').bind('closed', function () { <td>parent</td> <td>selector</td> <td>false</td> - <td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td> + <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td> </tr> <tr> <td>toggle</td> @@ -1301,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () { <h3>Markup</h3> <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> <pre class="prettyprint linenums"> -<div class="carousel"> +<div id="myCarousel" class="carousel"> <!-- Carousel items --> <div class="carousel-inner"> - ... + <div class="active item">…</div> + <div class="item">…</div> + <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> @@ -1345,7 +1350,7 @@ $('.myCarousel').carousel({ </tr> <tr> <td>slid</td> - <td>This event is fired when the carousel has completed it's slide transition.</td> + <td>This event is fired when the carousel has completed its slide transition.</td> </tr> </tbody> </table> @@ -1428,7 +1433,7 @@ $('.myCarousel').carousel({ </pre> <h3>Methods</h3> <h4>.typeahead(options)</h4> - <p>Initializes an input with a typahead.</p> + <p>Initializes an input with a typeahead.</p> </div> </div> </section> |