aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2011-11-24 20:27:18 -0800
committerJacob Thornton <[email protected]>2011-11-24 20:27:18 -0800
commit53ff2682cd95dd96fc1fbf234d7b0530127a464b (patch)
tree4200c15f0d00b75d0f6edc633da8689e806cb881
parentb14f551c9c1498247dc69251f8eebfde3b1002f6 (diff)
downloadbootstrap-53ff2682cd95dd96fc1fbf234d7b0530127a464b.tar.xz
bootstrap-53ff2682cd95dd96fc1fbf234d7b0530127a464b.zip
clean up scrollspy a bit - add public api method
-rw-r--r--docs/javascript.html2
-rw-r--r--js/bootstrap-scrollspy.js34
2 files changed, 29 insertions, 7 deletions
diff --git a/docs/javascript.html b/docs/javascript.html
index aa13d523d..f625e2323 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -201,7 +201,7 @@
<h3>Markup</h3>
<p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as additoinal data attributes.</p>
<pre class="prettyprint linenums">
-&lt;a class="btn" data-toggle="modal" data-target="my-modal" &gt;Launch Modal&lt;/a&gt;
+&lt;a class="btn" data-toggle="modal" data-target="#myModal" &gt;Launch Modal&lt;/a&gt;
</pre>
<p><span class="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action).</p>
<h3>Methods</h3>
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index 91c2dcb1e..e846fd718 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -17,15 +17,19 @@
* limitations under the License.
* ============================================================== */
-
!function ( $ ) {
- function ScrollSpy() {
+ "use strict"
+
+ /* SCROLLSPY CLASS DEFINITION
+ * ========================== */
+
+ function ScrollSpy( element ) {
var process = $.proxy(this.process, this)
this.selector = '.nav li > a'
- this.$body = $('body').delegate(this.selector, 'click', process)
- this.$scrollElement = $('[data-spy="scroll"]').bind('scroll', process)
+ this.$body = $('body').delegate(this.selector, 'click.scroll.data-api', process)
+ this.$scrollElement = $(element).bind('scroll.scroll.data-api', process)
this.refresh()
this.process()
@@ -78,11 +82,29 @@
if ( active.parent('.dropdown-menu') ) {
active.closest('li.dropdown').addClass('active')
}
-
}
}
- $(function () { new ScrollSpy() })
+
+ /* SCROLLSPY PLUGIN DEFINITION
+ * =========================== */
+
+ $.fn.scrollspy = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('scrollspy')
+ if (!data) $this.data('scrollspy', (data = new ScrollSpy(this)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.alert.ScrollSpy = ScrollSpy
+
+
+ /* SCROLLSPY DATA-API
+ * ============== */
+
+ $(function () { $('[data-spy="scroll"]').scrollspy() })
}( window.jQuery || window.ender ) \ No newline at end of file