すこし、まとめて jQueryと jQuery Mobileについての記事を読んでみた。
最初の一歩なので、基本の"き"を羅列してみる。
jQueryのポイント
- java Scriptの言語拡張は、おこなっていない
- 繰り返し記述がない
- 返値は、jQueryオブジェクト
- ドキュメントへのアクセスは $()で
- CSSへのアクセスは css() で
- ドキュメント読み込み完了イベントは、$(function(){処理})
- エレメント読み込み完了イベントは、$(エレメント).ready(function(){処理})
jQuery Mobileの初歩
- ひとつのhtmlに記述する
- html5のカスタム属性 data-* を使う
- ページ遷移はページ内リンク
サンプル・ソース
以下のサイトから、サンプルソースを拝借しました。http://www.amitpatil.me/getting-started-with-jquery-mobile-twitter-app/
jQeury Mobile + java scriptで作成したシンプルなTwitter閲覧ソフトだ。
jQueryMobileで書かれたhtml (index.html)と、実際の動作を受け持つ javascript (app.js)の2本のファイルで構成されている。
ユーザIDを検索すると、最近の10ツイートを表示する。
サンプル
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div data-role="header" data-position="inline">
<h1>jQueryMobile Twitter</h1>
</div>
<div style="padding-left:1%;">
<input type="search" name="tuser" id="tuser" value="" width="3"/>
<a data-inline="true" data-role="button" href="#" data-theme="c" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" onClick="javascript:getTweets()">
<span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Get Tweets</span>
</span>
</a>
</div>
<div style="padding-left:1%;">
<div class="content-primary">
<ul data-role="listview" data-inset="true" id="tweets">
</ul>
</div>
</div>
<br>
<div data-role="header" data-position="inline">
<h1></h1>
</div>
</body>
</html>
javascript部
//ドキュメント読み込み完了時に
$(function(){
//検索する関数
getTweets = function(){
//ID "tuser"の値を取得
var user = $("#tuser").val();
if(user != ""){
//リスト表示部を空白、初期化
$("#tweets").html('');
//検索中を示すため、読み込み中メッセージを表示
$.mobile.showPageLoadingMsg();
//Twitter APIを使って結果を取得し、dataパラメータに渡す。
$.getJSON('http://twitter.com/status/user_timeline/'+user+'.json?count=10&callback=?',
function(data){
var template = "";
var screenname = "";
var realname = "";
var tweet = "";
var avataar = "";
//抽出結果を一つづつ取り出して、index.htmlのitemにセット
$.each(data, function(index, item){
screenname = item.user.screen_name;
realname = item.user.name;
tweet = item.text;
created_at = item.created_at;
avataar = item.user.profile_image_url;
created_at = created_at.split(" ");
// item内のドキュメント(テンプレート)を作成
$("#tweets").append('<li><a href="#"><img style="margin:1%;" src="'+avataar+'" /><h3>'+screenname+'</h3><p>'+tweet+'</p><p class="light-text">'+created_at[1]+' '+created_at[2]+'</p></a></li>');
// list内を読み込みして再表示
$("#tweets").listview();
$("#tweets").listview("refresh");
});
//読み込み中のダイアログを消す
$.mobile.hidePageLoadingMsg();
});
}
}
});
コードの解説が全くない。後で、書き足すことにしよう。とりいそぎ、ここまで。
0 件のコメント:
コメントを投稿