Skip to content
Browse files

Add an example of paging through tweets using next/prev buttons (see #…

  • Loading branch information...
1 parent 57a715f commit 9fde39caa871e51091e18e9bd05e0fd85797c516 @purcell purcell committed Dec 9, 2011
Showing with 51 additions and 0 deletions.
  1. +51 −0 tweet/index.html
View
51 tweet/index.html
@@ -195,6 +195,57 @@
<div id='empty' class="query"></div>
</div>
+
+ <div class="demo">
+ <p><a name="10" class="num">#10</a> - use button to page forwards and backwards:</p>
+ <pre class="code">
+ jQuery(function($){
+ var options = {
+ username: "seaofclouds",
+ page: 1,
+ avatar_size: 32,
+ count: 4,
+ loading_text: "loading ..."
+ };
+
+ var widget = $("#paging .widget"),
+ next = $("#paging .next"),
+ prev = $("#paging .prev");
+
+ var enable = function(el, yes) {
+ yes ? $(el).removeAttr('disabled') :
+ $(el).attr('disabled', true);
+ };
+
+ var stepClick = function(incr) {
+ return function() {
+ options.page = options.page + incr;
+ enable(this, false);
+ widget.tweet(options);
+ };
+ };
+
+ next.bind("checkstate", function() {
+ enable(this, widget.find("li").length == options.count)
+ }).click(stepClick(1));
+
+ prev.bind("checkstate", function() {
+ enable(this, options.page > 1)
+ }).click(stepClick(-1));
+
+ widget.tweet(options).bind("loaded", function() { next.add(prev).trigger("checkstate"); });
+ });
+ </pre>
+ <div id="paging">
+ <div class="widget query"></div>
+ <div class="controls">
+ <button class="prev" type="button" disabled>&larr;</button>
+ <span class="pagenum"></span>
+ <button class="next" type="button" disabled>&rarr;</button>
+ </div>
+ </div>
+ </div>
+
<h3>Features</h3>
<ul>
<li>small size and fast download time</li>

0 comments on commit 9fde39c

Please sign in to comment.
Something went wrong with that request. Please try again.