diff options
author | ITSERVICES\rb7147 <rb7147@att.com> | 2017-04-25 11:46:00 -0400 |
---|---|---|
committer | ITSERVICES\rb7147 <rb7147@att.com> | 2017-05-03 09:58:17 -0400 |
commit | e0addf5b588a1244f9679becd90999dfcb4c3a94 (patch) | |
tree | 1212772d6366730266ff0e093c874b07aa716c29 /POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html | |
parent | 39fb0f30472777e4b60d6a7ac8aa4eb9773961ff (diff) |
Policy 1707 commit to LF
Change-Id: Ibe6f01d92f9a434c040abb05d5386e89d675ae65
Signed-off-by: ITSERVICES\rb7147 <rb7147@att.com>
Diffstat (limited to 'POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html')
-rw-r--r-- | POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html new file mode 100644 index 000000000..5eaed7028 --- /dev/null +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/js/affix.html @@ -0,0 +1,115 @@ +<div class="bs-docs-section"> + <h1 id="affix" class="page-header">Affix <small>affix.js</small></h1> + + <h2 id="affix-examples">Example</h2> + <p>The affix plugin toggles <code>position: fixed;</code> on and off, emulating the effect found with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning"><code>position: sticky;</code></a>. The subnavigation on the right is a live demo of the affix plugin.</p> + + <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 class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed 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, with the exception of <code>position: fixed;</code> on <code>.affix</code>, 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 its 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 CSS).</li> + <li>If a bottom offset is defined, scrolling past it 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 element 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. Use offsets to define when to toggle the pinning of an element.</p> + +{% highlight html %} +<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> + ... +</div> +{% endhighlight %} + + <h3>Via JavaScript</h3> + <p>Call the affix plugin via JavaScript:</p> +{% highlight js %} +$('#myAffix').affix({ + offset: { + top: 100, + bottom: function () { + return (this.bottom = $('.footer').outerHeight(true)) + } + } +}) +{% endhighlight %} + + + <h3 id="affix-options">Options</h3> + <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> + + <div class="table-responsive"> + <table class="table table-bordered table-striped js-options-table"> + <thead> + <tr> + <th>Name</th> + <th>type</th> + <th>default</th> + <th>description</th> + </tr> + </thead> + <tbody> + <tr> + <td>offset</td> + <td>number | function | object</td> + <td>10</td> + <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> + </tr> + <tr> + <td>target</td> + <td>selector | node | jQuery element</td> + <td>the <code>window</code> object</td> + <td>Specifies the target element of the affix.</td> + </tr> + + </tbody> + </table> + </div><!-- /.table-responsive --> + + + <h3 id="affix-events">Events</h3> + <p>Bootstrap's affix plugin exposes a few events for hooking into affix functionality.</p> + <div class="table-responsive"> + <table class="table table-bordered table-striped bs-events-table"> + <thead> + <tr> + <th>Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>affix.bs.affix</td> + <td>This event fires immediately before the element has been affixed.</td> + </tr> + <tr> + <td>affixed.bs.affix</td> + <td>This event is fired after the element has been affixed.</td> + </tr> + <tr> + <td>affix-top.bs.affix</td> + <td>This event fires immediately before the element has been affixed-top.</td> + </tr> + <tr> + <td>affixed-top.bs.affix</td> + <td>This event is fired after the element has been affixed-top.</td> + </tr> + <tr> + <td>affix-bottom.bs.affix</td> + <td>This event fires immediately before the element has been affixed-bottom.</td> + </tr> + <tr> + <td>affixed-bottom.bs.affix</td> + <td>This event is fired after the element has been affixed-bottom.</td> + </tr> + </tbody> + </table> + </div><!-- /.table-responsive --> +</div> |