PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery and PHP ajax lastest Tweet | 設置サンプル

Use Twitter API and jQuery to display lastest Tweet: Part 1 The Basics | 設置サンプル

▼Twitterに最近投稿されたつぶやきを取得して吹き出し表示します。

cocoism Says


ソース

<!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="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQuery and PHP ajax lastest Tweet | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#content").hide();
                $("#content").load("include/topic/twitter_jquery/tweetbasic/tweet.php", function(){
                    $(this).fadeIn();
                    $("#loading").hide();
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            body { background:#fff; }
            #demo {
                width:600px;
                margin:20px;
            }
            #pic {
                width:127px; height:150px;
                float:left;
                background:transparent url("include/topic/twitter_jquery/tweetbasic/twitter.jpg") no-repeat 0 0;
                position:relative;
            }
            #name {
                width:127px;
                position:absolute;
                bottom:0; left:0;
                text-align:center;
            }
            #speech {
                float:left;
                width:260px; height:93px;
                color:#000;
                background:transparent url("include/topic/twitter_jquery/tweetbasic/speech.jpg") no-repeat 0 0;
                padding:15px 20px 0px 140px;
            }
            #loading {
                padding-left:100px;
                background:transparent url("include/topic/twitter_jquery/tweetbasic/ajax-loader.gif") no-repeat 0 0;
                width:54px; height:54px;
            }
            .clear {
                clear:both;
            }
            #name { 
                text-align:center;
                font-weight:bold;
            }
            #logo {
                width:302px;
                margin:0px auto;
            }
            #title {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.codetricky.com/2009/06/use-twitter-api-and-jquery-to-display-lastest-tweet-part-1-the-basics/'>Use Twitter API and jQuery to display lastest Tweet: Part 1 The Basics</a> | 設置サンプル</h1>
            <p>▼Twitterに最近投稿されたつぶやきを取得して吹き出し表示します。</p>
<!-- CODE -->
            <div id="demo">
                <div id="pic">
                    <div id="name">cocoism Says</div>
                </div>
                <div id="speech">
                    <div id="content"></div>
                    <div id="loading"></div>
                </div>
                <p><br class="clear" />
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

polarized women