diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/js/application-scrollspy.js | 39 | ||||
| -rw-r--r-- | docs/assets/js/application.js | 6 | ||||
| -rw-r--r-- | docs/index.html | 8 | ||||
| -rw-r--r-- | docs/javascript.html | 42 |
4 files changed, 52 insertions, 43 deletions
diff --git a/docs/assets/js/application-scrollspy.js b/docs/assets/js/application-scrollspy.js deleted file mode 100644 index 1f0b7cebe..000000000 --- a/docs/assets/js/application-scrollspy.js +++ /dev/null @@ -1,39 +0,0 @@ -// scroll spy logic -// ================ -$(function () { - - var activeTarget, - position = {}, - $window = $(window), - nav = $('body > .topbar li a'), - targets = nav.map(function () { - return $(this).attr('href'); - }), - offsets = $.map(targets, function (id) { - return $(id).offset().top; - }); - - function setButton(id) { - nav.parent("li").removeClass('active'); - $(nav[$.inArray(id, targets)]).parent("li").addClass('active'); - } - - function processScroll(e) { - var scrollTop = $window.scrollTop() + 10, i; - for (i = offsets.length; i--;) { - if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) { - activeTarget = targets[i]; - setButton(activeTarget); - } - } - } - - nav.click(function () { - processScroll(); - }); - - processScroll(); - - $window.scroll(processScroll); - -})
\ No newline at end of file diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 86eefa89d..d1c6751ea 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -6,6 +6,12 @@ $(document).ready(function(){ $('body').dropdown() // catch any dropdowns on the page + // Scrollspy + // ========= + + $('body > .topbar').scrollSpy() + + // table sort example // ================== diff --git a/docs/index.html b/docs/index.html index 4764edfb5..e19059d24 100644 --- a/docs/index.html +++ b/docs/index.html @@ -23,8 +23,8 @@ <script>$(function () { prettyPrint() })</script> <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> <script src="assets/js/application.js"></script> - <script src="assets/js/application-scrollspy.js"></script> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="images/favicon.ico"> @@ -1592,6 +1592,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td> </tr> <tr> + <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> + <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td> + </tr> + <tr> <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td> <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td> </tr> @@ -1786,4 +1790,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </footer> </body> -</html>
\ No newline at end of file +</html> diff --git a/docs/javascript.html b/docs/javascript.html index 10acbbf5b..b830e7d64 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -15,12 +15,12 @@ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script>$(function () { prettyPrint() })</script> - <script src="assets/js/application-scrollspy.js"></script> <script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-alerts.js"></script> <script src="../js/bootstrap-twipsy.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> <script src="../js/bootstrap-tabs.js"></script> <!-- Le styles --> @@ -47,6 +47,7 @@ <li><a href="#overview">Overview</a></li> <li><a href="#modal">Modals</a></li> <li><a href="#dropdown">Dropdown</a></li> + <li><a href="#scrollspy">ScrollSpy</a></li> <li><a href="#tabs">Tabs</a></li> <li><a href="#twipsy">Twipsy</a></li> <li><a href="#popover">Popover</a></li> @@ -167,7 +168,7 @@ $('#modal-content') <section id="dropdown"> <div class="page-header"> - <h1>Drop Down <small>bootstrap-dropdown.js</small></h1> + <h1>Dropdown <small>bootstrap-dropdown.js</small></h1> </div> <div class="row"> <div class="span4 columns"> @@ -228,6 +229,43 @@ $('#modal-content') </div> </section> + <!-- ScrollSpy + ================================================== --> + + <section id="scrollspy"> + <div class="page-header"> + <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1> + </div> + <div class="row"> + <div class="span4 columns"> + <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p> + <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span12 columns"> + <h2>Using boostrap-scrollspy.js</h2> + <pre class="prettyprint linenums">$('#topbar').dropdown()</pre> + <h3>Method</h3> + <h4>$().scrollspy</h4> + <p> + Auto activates navigation buttons by users scroll position. + </p> + <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre> + <p> + <strong>Note:</strong> Topbar anchor tags must have resolvable id targets like <code><a href="#home">home</a></code>. + </p> + <h3>Events</h3> + <h4>scrollspy:refresh</h4> + <p>The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the <code>scrollspy:refresh</code> event.</p> + <pre class="prettyprint linenums">$('body > .topbar').trigger('scrollspy:refresh')</pre> + <h3>Demo</h3> + <p>Peep the topbar navigation homie!</p> + <script>$(function () { + $('body > .topbar').scrollSpy() + })</script> + </div> + </div> + </section> + <!-- Tabs ================================================== --> |