jQuery Mobile

jQueryMobileとは

主なスマートフォンのWebブラウザやタブレットで機能し、ユーザーインターフェイスの統一をすることができるjQueryのプラグインです。

jQueryMobileの宣言

head要素内で以下のように外部js, 外部スタイルシートを呼び出す


	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

jQueryMobileのHTML構造

data-role等の属性の情報をjQueryが読み取って、.ui-liのようなクラスを要素に追記し、CSS3でのデザイン効果を与えている


<div data-role="page" data-theme="b" id="jqm-home">
	<div id="jqm-homeheader">
		<h1>...</h1>
	</div>
	
	<div data-role="content">
		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
			<li data-role="list-divider">List</li>
			<li><a href="#">...</a></li>
			<li><a href="#">...</a></li>
			<li><a href="#">...</a></li>
		</ul>
 
	</div>
</div>

jQueryMobileの問題点

若干、動きがもっさりしていると感じる人がいる
リンクに href="/～" のようにスラッシュから始まる絶対パスが使えない
デフォルトのカスタマイズにjQeuryで組み直されたHTMLとCSSの理解が必要