mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-19 11:51:23 +02:00
Code Issues Releases Wiki Activity

add bootstrap-scrollspy

Browse Source
This commit is contained in:
Jacob Thornton
2011-09-10 22:14:57 -07:00
parent a71d5d8e99
commit 64176caa97
8 changed files with 219 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/assets/js/application-scrollspy.js
View File

@@ -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);
})

6
docs/assets/js/application.js
View File

@@ -6,6 +6,12 @@ $(document).ready(function(){
$('body').dropdown() // catch any dropdowns on the page
// Scrollspy
// =========
$('body > .topbar').scrollSpy()
// table sort example
// ==================

4
docs/index.html
View File

@@ -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">
@@ -1519,7 +1519,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
</div>
<div class="span12">
<h2>Getting started</h2>
<h2>Getting started</h2>
<p>We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either <a href="http://jquery.com/" target="_blank">jQuery</a> or <a href="http://ender.no.de" target="_blank">Ender</a>, but we encourage you to extend and modify them to fit your development needs!</p>
<h2>Do I need javascript?</h2>
<p>The short answer is <strong>no</strong>... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our <a href="./javascript.html">plugin documentation page</a>.</p>

42
docs/javascript.html
View File

@@ -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 -->
@@ -46,6 +46,7 @@
<ul>
<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>
@@ -152,7 +153,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">
@@ -213,6 +214,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
================================================== -->