Archived posts in ' "jQuery Mobile"

jQuery Mobileを触ってみました

Posted by specterant on 2012.05.30

スマートフォンサイトの構築も出来ないとな〜って思い、
jQuery Mobileを触ってみました。

まだ、ほんの少しだけ触ったので、大それた事は言えないのですが、便利だなぁ〜って思いました。
とりあえず、実装したいのであれば、かなり便利だと思います。

ただ、オリジナルのデザインにするのであれば、
色々とCSSを弄らないとダメなので、慣れるまでは時間がかかりそうなだなぁ〜と思いました。

で、とりあえず私用メモします。

まずは、HTMLです。
divタグ(通常)の属性にdata-role=”要素名”を追加し、それぞれ役割を決めます。
data-role属性は省略することができるのでが、複数ページを作成する場合はdata-role=”page”は必須になります。
あと、jquery.mobile.cssとimagesフォルダ(jQuery Mobileに入っていたもの)は同階層にしといた方が楽ちんだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
	<link rel="stylesheet" href="./jquery.mobile.css" />
	<script src="./jquery.js"></script>
	<script src="./jquery.mobile.init.js"></script>
	<script src="./jquery.mobile.js"></script>
</head>
<body>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ contents area start ] +++++++++++++++++++++++++++++++++++++++++++++-->
<div data-role="page">
	<header data-role="header">
		<h1>ヘッダーエリア</h1>
	</header>

	<div data-role="content">
		<h2>コンテンツエリア</h2>
		<p>テキスト</p>
	</div>

	<footer data-role="footer">
		<small>&amp;nbsp;&amp;copy;&amp;nbsp;コピーライト</small>
	</footer>
</div>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ //contents area end ] +++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>

続いて、jQuery Mobileの初期設定用のJavaScriptを読み込む。
別に外部でなくてもいいんですが、jquery.mobile.jsを読み込む前に読み込ませないとダメみたいです。
<script src="./jquery.mobile.init.js"></script>

そして中身です。
諸々、英語なので日本語化したり、ページ遷移のアニメーションを統一させたい時に設定します。
ちなみに、これは必須ではないです。
$(document).bind('mobileinit', function(){
	$.mobile.page.prototype.options.addBackBtn = true; //戻るボタンを表示
	$.mobile.defaultPageTransition = "fade"; //ページ遷移のアニメーション
	$.mobile.loadingMessage = '読み込み中';
	$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
	$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
	$.mobile.selectmenu.prototype.options.closeText= '閉じる';
	$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
	$.mobile.page.prototype.options.backBtnText = '戻る';
});
とまぁ〜こんな感じです。
今後、いろいろ触ってみます。


下記が参考にさせていただいたサイトです。

参考にさせていただいたサイト
ASCII.jp:西畑一馬のjQuery Mobileデザイン入門
jQuery Mobile 1.1.0 日本語リファレンス

No Comments