diff options
Diffstat (limited to 'docs/_includes/js')
| -rw-r--r-- | docs/_includes/js/carousel.html | 19 | ||||
| -rw-r--r-- | docs/_includes/js/dropdowns.html | 18 | ||||
| -rw-r--r-- | docs/_includes/js/modal.html | 82 | ||||
| -rw-r--r-- | docs/_includes/js/popovers.html | 6 | ||||
| -rw-r--r-- | docs/_includes/js/scrollspy.html | 2 | ||||
| -rw-r--r-- | docs/_includes/js/tabs.html | 40 | ||||
| -rw-r--r-- | docs/_includes/js/tooltips.html | 7 |
7 files changed, 138 insertions, 36 deletions
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index 62adc09e6..30bbf2ede 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -1,7 +1,7 @@ <div class="bs-docs-section"> <h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1> - <p>A slideshow component for cycling through elemnts, like a carousel. <strong>Nested carousels are not supported.</strong></p> + <p>A slideshow component for cycling through elements, like a carousel. <strong>Nested carousels are not supported.</strong></p> <h2 id="carousel-examples">Examples</h2> <div class="bs-example"> @@ -23,11 +23,11 @@ </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> @@ -60,11 +60,11 @@ <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> @@ -75,6 +75,11 @@ <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p> </div> + <div class="bs-callout bs-callout-warning" id="callout-carousel-active"> + <h4>Initial active element required</h4> + <p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p> + </div> + <h3>Optional captions</h3> <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p> <div class="bs-example"> @@ -108,11 +113,11 @@ </div> </div> <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> - <span class="glyphicon glyphicon-chevron-left"></span> + <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html index dd360a334..826fe6c08 100644 --- a/docs/_includes/js/dropdowns.html +++ b/docs/_includes/js/dropdowns.html @@ -20,7 +20,7 @@ <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> - <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -33,7 +33,7 @@ </ul> </li> <li class="dropdown"> - <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -48,7 +48,7 @@ </ul> <ul class="nav navbar-nav navbar-right"> <li id="fat-menu" class="dropdown"> - <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -71,7 +71,7 @@ <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Regular link</a></li> <li role="presentation" class="dropdown"> - <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -84,7 +84,7 @@ </ul> </li> <li role="presentation" class="dropdown"> - <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -97,7 +97,7 @@ </ul> </li> <li role="presentation" class="dropdown"> - <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown <span class="caret"></span> </a> @@ -122,9 +122,9 @@ <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p> {% highlight html %} <div class="dropdown"> - <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown trigger - <span class="caret"></span> + <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... @@ -134,7 +134,7 @@ <p>To keep URLs intact with link buttons, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> {% highlight html %} <div class="dropdown"> - <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false"> Dropdown trigger <span class="caret"></span> </a> diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index e47464a4c..22924b4e7 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -213,6 +213,86 @@ </div> {% endhighlight %} + <h2 id="modals-related-target">Varying modal content based on trigger button</h2> + <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p> + <div class="bs-example" style="padding-bottom: 24px;"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> + ...more buttons... + + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> + </div><!-- /.modal --> + </div><!-- /.bs-example --> +{% highlight html %} +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> +...more buttons... + +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> +</div> +{% endhighlight %} +{% highlight js %} +$('#exampleModal').on('show.bs.modal', function (event) { + var button = $(event.relatedTarget) // Button that triggered the modal + var recipient = button.data('whatever') // Extract info from data-* attributes + // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). + // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. + var modal = $(this) + modal.find('.modal-title').text('New message to ' + recipient) + modal.find('.modal-body input').val(recipient) +}) +{% endhighlight %} + <h2 id="modals-usage">Usage</h2> <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p> @@ -262,7 +342,7 @@ <td>path</td> <td>false</td> <td> - <p><span class="text-danger">This option is deprecated since v3.2.1 and will be removed in v4.</span> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> + <p><strong class="text-danger">This option is deprecated since v3.3.0 and will be removed in v4.</strong> We recommend instead using client-side templating or a data binding framework, or calling <a href="http://api.jquery.com/load/">jQuery.load</a> yourself.</p> <p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. If you're using the data-api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p> {% highlight html %} <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a> diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 7739c685e..09b8f36eb 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -12,6 +12,12 @@ <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> + <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p> +{% highlight js %} +$(function () { + $('[data-toggle="popover"]').popover() +}) +{% endhighlight %} </div> <div class="bs-callout bs-callout-warning"> <h4>Popovers in button groups and input groups require special setting</h4> diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html index 8fa37d87f..25f5671c4 100644 --- a/docs/_includes/js/scrollspy.html +++ b/docs/_includes/js/scrollspy.html @@ -20,7 +20,7 @@ <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> - <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#one" tabindex="-1">one</a></li> <li><a href="#two" tabindex="-1">two</a></li> diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html index aec6485aa..69f0cc45f 100644 --- a/docs/_includes/js/tabs.html +++ b/docs/_includes/js/tabs.html @@ -3,7 +3,7 @@ <h2 id="tabs-examples">Example tabs</h2> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> - <div class="bs-example bs-example-tabs"> + <div class="bs-example bs-example-tabs" role="tabpanel"> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li> <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li> @@ -59,20 +59,24 @@ $('#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 <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p> {% highlight html %} -<!-- Nav tabs --> -<ul class="nav nav-tabs" role="tablist"> - <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> - <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> - <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> - <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> -</ul> +<div role="tabpanel"> + + <!-- Nav tabs --> + <ul class="nav nav-tabs" role="tablist"> + <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> + <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> + <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> + <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> + </ul> + + <!-- Tab panes --> + <div class="tab-content"> + <div role="tabpanel" class="tab-pane active" id="home">...</div> + <div role="tabpanel" class="tab-pane" id="profile">...</div> + <div role="tabpanel" class="tab-pane" id="messages">...</div> + <div role="tabpanel" class="tab-pane" id="settings">...</div> + </div> -<!-- Tab panes --> -<div class="tab-content"> - <div role="tabpanel" class="tab-pane active" id="home">...</div> - <div role="tabpanel" class="tab-pane" id="profile">...</div> - <div role="tabpanel" class="tab-pane" id="messages">...</div> - <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> {% endhighlight %} @@ -94,10 +98,10 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) </p> {% highlight html %} <ul class="nav nav-tabs" role="tablist" id="myTab"> - <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> - <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> - <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> - <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> + <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> + <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> + <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> + <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 3ec076b70..87893608b 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -61,6 +61,13 @@ <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> + <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p> +{% highlight js %} +$(function () { + $('[data-toggle="tooltip"]').tooltip() +}) +{% endhighlight %} + </div> <div class="bs-callout bs-callout-warning"> <h4>Tooltips in button groups and input groups require special setting</h4> |