diff options
Diffstat (limited to 'javascript.html')
| -rw-r--r-- | javascript.html | 37 |
1 files changed, 26 insertions, 11 deletions
diff --git a/javascript.html b/javascript.html index 347c2c1c5..48aaf2cd9 100644 --- a/javascript.html +++ b/javascript.html @@ -205,7 +205,7 @@ $('#myModal').on('show.bs.modal', function (e) { <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h4 class="modal-title">Modal title</h4> + <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... @@ -222,12 +222,8 @@ $('#myModal').on('show.bs.modal', function (e) { <div class="bs-callout bs-callout-warning"> <h4>Make modals accessible</h4> - <p> - Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br> - Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br> - Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br> - Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code><div></code> to point to this description (this is not shown in the above example). - </p> + <p>Be sure to add <code>role="dialog"</code> to <code>.modal</code>, <code>aria-labelledby="myModalLabel"</code> attribute to reference the modal title, and <code>aria-hidden="true"</code> to tell assistive technologies to skip the modal's DOM elements.</p> + <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p> </div> <h2 id="modals-usage">Usage</h2> @@ -712,15 +708,33 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) <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. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p> {% highlight html %} +<!-- Nav 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="#settings" data-toggle="tab">Settings</a></li> </ul> + +<!-- Tab panes --> +<div class="tab-content"> + <div class="tab-pane active" id="home">...</div> + <div class="tab-pane" id="profile">...</div> + <div class="tab-pane" id="messages">...</div> + <div class="tab-pane" id="settings">...</div> +</div> {% endhighlight %} - <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p> + <h3>Fade effect</h3> + <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p> +{% highlight html %} +<div class="tab-content"> + <div class="tab-pane fade in active" id="home">...</div> + <div class="tab-pane fade" id="profile">...</div> + <div class="tab-pane fade" id="messages">...</div> + <div class="tab-pane fade" id="settings">...</div> +</div> +{% endhighlight %} <h3>Methods</h3> <h4>$().tab</h4> @@ -1020,7 +1034,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { <h3>Live demo</h3> <div class="bs-example" style="padding-bottom: 24px;"> - <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a> + <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" role="button">Click to toggle popover</a> </div> <h4>Four directions</h4> @@ -1203,7 +1217,7 @@ $('#myPopover').on('hidden.bs.popover', function () { </div><!-- /example --> <div class="bs-example"> - <div class="alert alert-block alert-danger fade in"> + <div class="alert alert-danger fade in"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4>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> @@ -1358,7 +1372,7 @@ $('#my-alert').bind('closed.bs.alert', function () { <h2 id="buttons-usage">Usage</h2> <p>Enable buttons via JavaScript:</p> {% highlight js %} -$('.nav-tabs').button() +$('.btn-group').button() {% endhighlight %} <h3>Markup</h3> @@ -1756,6 +1770,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { <h3>Via data attributes</h3> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> + <p>The <code>data-ride="carousel"</code> attribute is used to mark a carousel as animating starting at page load.</p> <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> |