JavaScript + Ajax 実践サンプル集 - jQueryのFlipプラグインを利用して最新のつぶやきを表示する

jQueryのFlipプラグインを利用して最新のつぶやきを表示する

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

このサンプルは、jQueryの Flip プラグインを利用してTwitterの最新のつぶやきを表示します。サンプルが表示されたらテキストボックスのTwitterのUser Nameを入力して[Submit]ボタンをクリックします。Twitterのアカウントがない方は[Submit]ボタンをクリックしてください。するとボックスがフリップして最新のつぶやきが表示されます。[Return]をクリックすると元のボックスに戻ります。

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

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

<!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" xml:lang="en" lang="en"> 
<head> 
  <title>AJAXified jQuery Flip! Plugin</title> 
  <link rel="stylesheet" type="text/css" href="jQuery/jqueryFlip/style.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script src="jQuery/jqueryFlip/jquery.flip.min.js" type="text/javascript"></script>  
  <script type="text/javascript">
  $(function () {
    $('#flip').live('click', function () {
      $("#front").flip({
        direction: 'tb',
        content: $('#back'),
        color: '#C8E3DC',
        onBefore: function () {
          var twitterUsername = $('#twitterUsername').val();
          var url = 'http://twitter.com/status/user_timeline/' + twitterUsername + '.json?count=1&callback=?';
          $.getJSON(url, function (data) {
            var twitterList = '<ul>';
            $.each(data, function (i, item) {
              twitterList += '<li>' + item.text + '</li>';
            });
            twitterList += '</ul>';
            $('#backAjax').html(twitterList);
            $('#backTitle').text("Here is " + twitterUsername + "'s Lastest Tweet...");
          });
        },
        onAnimation: function () {
        },
        onEnd: function () {
          $('.revert').live('click', function () {
            $('#front').revertFlip();
          });
        }
      });
    });
  }); 
  </script> 
</head> 
<body> 
   <div id="front" class="flipBox"> 
      <span id="frontStatic">Enter Twitter Username</span> 
      <input id="twitterUsername" type="text" value="AkioKasai" /> 
      <button id="flip">Submit</button> 
   </div> 
   <div id="back" class="flipBox" style="display: none"> 
      <span id="backTitle">Here is Your Latest Tweet...</span> 
      <span id="backAjax">Back AJAX</span> 
      <button class="revert">Return</button> 
   </div> 
</body> 
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのFlipプラグインを利用して最新のつぶやきを表示する

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

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

jQueryのFlipプラグインを利用して最新のつぶやきを表示する

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

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