aboutsummaryrefslogtreecommitdiff
path: root/docs/javascript.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2011-09-10 22:31:55 -0700
committerMark Otto <[email protected]>2011-09-10 22:31:55 -0700
commit3755ee158f947bdb1d44b86faa9537ac9f3cbbc5 (patch)
tree9c3e0d0b59c07068f2c210eab1262f2d664ab77d /docs/javascript.html
parent40693f261838136499b11c728e5389815e3ee322 (diff)
parent709789d16dccc9c812b62e8d22c61d7f4748e9e2 (diff)
downloadbootstrap-3755ee158f947bdb1d44b86faa9537ac9f3cbbc5.tar.xz
bootstrap-3755ee158f947bdb1d44b86faa9537ac9f3cbbc5.zip
Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip
Diffstat (limited to 'docs/javascript.html')
-rw-r--r--docs/javascript.html42
1 files changed, 40 insertions, 2 deletions
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>&lt;a href="#home"&gt;home&lt;/a&gt;</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
================================================== -->