mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

Browse Source
This commit is contained in:
Mark Otto
2011-09-10 22:31:55 -07:00
parent 40693f2618 709789d16d
commit 3755ee158f
13 changed files with 352 additions and 72 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
// ==================

8
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">
@@ -1591,6 +1591,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
<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>
@@ -1786,4 +1790,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</footer>
</body>
</html>
</html>

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 -->
@@ -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
================================================== -->