diff options
Diffstat (limited to 'docs/javascript')
| -rw-r--r-- | docs/javascript/dropdowns.md | 2 | ||||
| -rw-r--r-- | docs/javascript/modal.md | 82 | ||||
| -rw-r--r-- | docs/javascript/popovers.md | 6 | ||||
| -rw-r--r-- | docs/javascript/tooltips.md | 6 |
4 files changed, 95 insertions, 1 deletions
diff --git a/docs/javascript/dropdowns.md b/docs/javascript/dropdowns.md index a80ae0d8d..3e389e2c9 100644 --- a/docs/javascript/dropdowns.md +++ b/docs/javascript/dropdowns.md @@ -125,7 +125,7 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. <div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown"> Dropdown trigger - <span class="caret"></span> + <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md index 5f748234d..1d018c80c 100644 --- a/docs/javascript/modal.md +++ b/docs/javascript/modal.md @@ -224,6 +224,88 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl </div> {% endhighlight %} +## Varying modal content based on trigger button + +Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`. + +<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> + + <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> +</div> + +{% 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> + +<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 %} + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md index fa78c7acf..0844621ba 100644 --- a/docs/javascript/popovers.md +++ b/docs/javascript/popovers.md @@ -14,6 +14,12 @@ Popovers whose both title and content are zero-length are never displayed. <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/javascript/tooltips.md b/docs/javascript/tooltips.md index 516b5f4ae..008db7c86 100644 --- a/docs/javascript/tooltips.md +++ b/docs/javascript/tooltips.md @@ -78,6 +78,12 @@ Hover over the buttons below to see their tooltips. <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> |