PHP+jQuery+twitter の画面作成
#03 画面を作りこんでいこう
http://dotinstall.com/lessons/more_php_v2/21803
を参考に index.html の作成
head要素の中に
1 |
を書いて、jQuery を使えるようにする
また、body 部分に
1 2 3 | <h1>もっと読む</h1><ul id="tweets"></ul> |
として
ul のところへ
twitter のつぶやきを表示する
次に、ローディング中のメッセージを表示したいので
1 | <p id="loading">loading ... </p> |
としておく
まず、ボタンで次を呼び出すようにする
1 | <input type="button" id="more" value="もっと読む"> |
ここまでできたら一度画面を確認する
次に、この設置したボタンにクリックイベントをつける
これは
#04 クリックイベントを設定しよう
http://dotinstall.com/lessons/more_php_v2/21804
を見ながら行う
まず、loading … の表示は、読み込んでいるときに表示されればいいので
ソースを書き換える
1 | <p id="loading">loading ... </p> |
を
1 | <p id="loading" style="display:none">loading ... </p> |
とすることで非表示になる
display:none については
http://www.htmq.com/style/display.shtml
に解説があるので、こちらも参考にする
設定は、ほかにもあるのでこちらも参考にすると今後わかりやすい
次にscript の中で
ボタンがクリックされたときの処理を
jQuery で書いていく
ボタンをクリックしたときの動作は
1 2 | $('#more').click(function(){}); |
となる
# は id を示すので
#more は id=”more” という意味
クリックしたときの動作として
消しておいた loading … の文字を表示したいので
1 | $('#loading').show(); |
で表示する
.show() は
非表示状態のものを表示する関数で
http://semooh.jp/jquery/api/effects/show/_/
の解説がわかりやすい
次に、Ajax を使って、つぶやきをget したいので
1 | $.get('more.php',{}, function(rs){} |
.get() は
HTTP通信のGETでページを読み込む関数
.get() の引数は
URL
キーと値の組み合わせ
行う処理を書いた関数
となる
今回なら
URL = more.php
キーと値の組み合わせはまだない {}
行う処理 = function(rs){}
となる
この .get() の解説も
http://semooh.jp/jquery/api/ajax/jQuery.get/+url,+data,+callback+/
を参考にするとわかりやすい
function(rs){}
には、返ってきた後に処理がうまくいったなら
loading … をかくしたいので
1 | $('#loading').hide(); |
hide() は
要素が表示状態にあるのを非表示にする関数
http://semooh.jp/jquery/api/effects/hide/_/
を参考にする
loading の文字を消したら
つぶやきを表示したいので
1 | $(rs).append('#tweets') |
とする
.append() は
指定したコンテンツを追加する jQuery の関数
つまり、今回はつぶやきを格納した rs の内容を
id=”tweets” のところへ追加する
ここまでできたら
more.php へtwitter のサイトからつぶやきを引っ張ってくるようにする