読者です 読者をやめる 読者になる 読者になる

Septeni Engineer's Blog

セプテーニエンジニアが綴る技術ブログ

jQuery Mobileを使ってスマートフォンサイトを作ってみる

HTML5



皆さん。こんばんわ!@kouhei_mitsuyaです。
今日はスマートフォンサイトの制作を簡単に行えるjQuery[jQuery Mobile]を紹介します。

f:id:k_chindamaikul:20150722160317p:plain

使い方

jQuery MobileのサイトからライブラリをダウンロードしてCSSjQueryそして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>

▼こんな感じになります
f:id:k_chindamaikul:20150722160410j:plain

jquerymobileでは今日紹介したモノ意外にも様々な要素を指定をすることが可能です。
今回のエントリーで使用したサンプルをアップしました。スマートフォンをお持ちの方は是非スマートフォンからアクセスしてみてください。