使い方

jQuery MobileのサイトからライブラリをダウンロードしてCSSとjQueryそしてjQuery Mobile本体を読み込みます。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

次に非常にシンプルなテンプレートを紹介。

<div id="p1" data-role="page">
	<a href="#p2" data-role="button">p2へ</a>
</div>

<div id="p2" data-role="page">
	<a href="#p1" data-role="button">back</a>
</div>

divに対してdata-role="page"を指定しその中にコンテンツ要素を挿入します。
data-role="page"を指定することでdiv要素を1つのページとして認識しています。
1ページごとにhtmlファイルを持たせるのではなく複数のページを同じhtmlファイルに記述しdata-role="page"で各ページとして認識させます。

▼このテンプレートを使いうとこんな感じになります。
f:id:k_chindamaikul:20150722160347j:plain

この他にも要素を指定するだけで簡単にUIを作れます。

controlgroupを指定してボタンを1つのグループにする。

<div data-role="controlgroup" data-type="horizontal">
   <a href="#p1" data-role="button">sample1</a>
   <a href="#p1" data-role="button">sample2</a>
   <a href="#p1" data-role="button">sample3</a>
</div>

data-iconに要素を指定してボタンにアイコンを表示させる

<a href="#back" data-role="button" data-icon="arrow-u">sample1</a>
<a href="#back" data-role="button" data-icon="arrow-d">sample2</a>
<a href="#back" data-role="button" data-icon="delete">sample3</a>
<a href="#back" data-role="button" data-icon="pop">sample4</a>
<a href="#back" data-role="button" data-icon="grid">sample5</a>
<a href="#back" data-role="button" data-icon="star">sample6</a>