JavaScript + Ajax 実践サンプル集 - jQueryでTwitterのつぶやきを無制限にスクロールして表示する

jQueryでTwitterのつぶやきを無制限にスクロールして表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryでTwitterのapiを利用して特定のユーザー(私の）つぶやきを表示します。スクロールバーをドラッグしてつぶやきをドラッグするとTwitterのapiを実行して次のつぶやきを表示します。この処理を繰り返して無制限につぶやきを表示します。「このサンプルを編集して試してみる」をクリックしたら、usernameの変数にご自分のTwitterのユーザー名を設定して実行してみてください。

このサンプルを編集して試してみる

このサンプルの解説は、ここを参照してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Unlimited Scroll example using the Twitter API</title>
  <link href="jQuery/twitterUnlimitedScroll/css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var pageSize = 15;
      var username = 'akiokasai';
      var currentPage = 1;

var appendTweet = function (tweet, id) {
        $("<p />")
			.html(tweet)
			.append($("<a />")
					.attr("href", "http://twitter.com/" + username + "/status/" + id)
					.attr("title", "Go to Twitter status")
					.append($("<img />")
						.attr("src", "jQuery/twitterUnlimitedScroll/images/link.png")
					)
			)
		  .appendTo($("#tweets"));
      };

var loadTweets = function () {
        var url = "http://twitter.com/status/user_timeline/"
				+ username + ".json?count=" + pageSize + "&page=" + currentPage + "&callback=?";

$.getJSON(url, function (data) {
          $.each(data, function (i, post) {
            appendTweet(post.text, post.id);
          });

$("#overlay").fadeOut();
          $("#pageCount").html(currentPage);
          $("#tweetCount").html(currentPage * pageSize);
        });

};

loadTweets();

$("#tweets").scroll(function () {
        if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
          currentPage++;
          if (currentPage > 10) {
            alert('We should not spam the Twitter API with calls. I hope you get the idea!');
            return false;
          }
          $("#overlay").fadeIn();
          loadTweets();
        }
      });

});  
  
  </script>
</head>
<body>
  <div id="tweets">
    
  </div>
  <div id="overlay">
    <img src="jQuery/twitterUnlimitedScroll/images/ajax-loader.gif" />
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでTwitterのつぶやきを無制限にスクロールして表示する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでTwitterのつぶやきを無制限にスクロールして表示する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!