diff options
| author | Mark Otto <[email protected]> | 2013-11-30 00:55:00 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-11-30 00:55:00 -0800 |
| commit | 080aa7f5c8557b232005cb947df51968d4629656 (patch) | |
| tree | e546cc3ec229d201751e426da36a1b2a586ee428 /javascript.html | |
| parent | 441f9d67179f766377eed4b0cedc5dc6eec290e4 (diff) | |
| parent | 819e920d1646f7e9fec8d3dd6ba10dcbd2fa1599 (diff) | |
| download | bootstrap-080aa7f5c8557b232005cb947df51968d4629656.tar.xz bootstrap-080aa7f5c8557b232005cb947df51968d4629656.zip | |
Merge branch 'master' into pr/11299
Conflicts:
dist/css/bootstrap.min.css
docs-assets/js/raw-files.js
Diffstat (limited to 'javascript.html')
| -rw-r--r-- | javascript.html | 50 |
1 files changed, 31 insertions, 19 deletions
diff --git a/javascript.html b/javascript.html index 06a0bd021..b424f46f6 100644 --- a/javascript.html +++ b/javascript.html @@ -304,15 +304,15 @@ $('#myModal').modal({ {% endhighlight %} <h4>.modal('toggle')</h4> - <p>Manually toggles a modal.</p> + <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p> {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %} <h4>.modal('show')</h4> - <p>Manually opens a modal.</p> + <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p> {% highlight js %}$('#myModal').modal('show'){% endhighlight %} <h4>.modal('hide')</h4> - <p>Manually hides a modal.</p> + <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p> {% highlight js %}$('#myModal').modal('hide'){% endhighlight %} <h3>Events</h3> @@ -328,11 +328,11 @@ $('#myModal').modal({ <tbody> <tr> <td>show.bs.modal</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> + <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr> <tr> <td>shown.bs.modal</td> - <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td> + <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> </tr> <tr> <td>hide.bs.modal</td> @@ -346,8 +346,8 @@ $('#myModal').modal({ </table> </div><!-- /.table-responsive --> {% highlight js %} -$('#myModal').on('hidden.bs.modal', function () { - // do something… +$('#myModal').on('hidden.bs.modal', function (e) { + // do something... }) {% endhighlight %} </div> @@ -529,6 +529,7 @@ $('#myDropdown').on('show.bs.dropdown', function () { {% endhighlight %} </div> + <!-- ScrollSpy ================================================== --> <div class="bs-docs-section"> @@ -588,7 +589,13 @@ $('#myDropdown').on('show.bs.dropdown', function () { <h3>Via data attributes</h3> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> {% highlight html %} -<body data-spy="scroll" data-target="#navbar-example"> +<body data-spy="scroll" data-target=".navbar-example"> + ... + <div class="navbar-example"> + <ul class="nav nav-tabs"> + ... + </ul> + </div> ... </body> {% endhighlight %} @@ -596,7 +603,7 @@ $('#myDropdown').on('show.bs.dropdown', function () { <h3>Via JavaScript</h3> <p>Call the scrollspy via JavaScript:</p> {% highlight js %} -$('body').scrollspy({ target: '#navbar-example' }) +$('body').scrollspy({ target: '.navbar-example' }) {% endhighlight %} <div class="bs-callout bs-callout-danger"> @@ -1926,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () { <hr class="bs-docs-separator"> <h2 id="affix-usage">Usage</h2> + <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p> + + <h3>Positioning via CSS</h3> + <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p> + <p>Here's how the affix plugin works:</p> + <ol> + <li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li> + <li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li> + <li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the elemtn from there.</li> + </ol> + <p>Follow the above steps to set your CSS for either of the usage options below.</p> <h3>Via data attributes</h3> - <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p> + <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.</p> {% highlight html %} -<div data-spy="affix" data-offset-top="200">...</div> +<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> + ... +</div> {% endhighlight %} - <div class="bs-callout bs-callout-warning"> - <h4>Requires independent styling ;)</h4> - <p> - Affix toggles between three states/classes: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin). - The <code>.affix-top</code> class should be in the regular flow of the document. The <code>.affix</code> class should be <code>position: fixed</code>. And <code>.affix-bottom</code> should be <code>position: absolute</code>. Note: <code>.affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided. - </p> - </div> - <h3>Via JavaScript</h3> <p>Call the affix plugin via JavaScript:</p> {% highlight js %} |