- Coding Methodology
- 第44回 jQuery MobileでSmartphone向けサイトを構築
第44回 jQuery MobileでSmartphone向けサイトを構築
jQuery Mobileとは、Smartphone構築のためのフレームワークの一つです。スライドショーやドロップダウンメニューなど、様々なプラグインがありますが、それらと同様にhtmlに読み込ませてからhtmlコーディングをすることで、簡易的にSmartphoneサイトを構築することができます。今回は基本的なページの作成のしかたをご紹介します。
外部ファイルを読み込む
まずは、jQuery Mobileを動作させるための外部ファイルを読み込みます。(01)
jQueryをベースとしたフレームワークなので、jQueryを読み込ませた後に、jquery.mobile-1.0.min.jsとjquery.mobile-1.0.min.cssを読み込ませます。
コンテンツ部分をコーディングする
jQuery Mobileには、ページ作成のためのcssやjsがデフォルトで含まれているので、htmlコーディングのみでページを作成することが可能です。(02)
各タグに「data-role」や「data-theme」などの属性値を記述することで、ページ内でのレイアウトやカラーパターンを、また、「data-transition」属性値を記述することでページ遷移のアニメーションを決めることができます。
【コード解説】
- *1
-
data-role="page"
「data-role」で、その要素の役割を指定しています。
値を「page」とすることで、その要素をページとして扱います。「<div data-role="page">」を複数記述することで、1ファイル内に複数のページを持たせることも可能になります。ページ遷移は、通常のhtmlでのアンカーリンクとなるので、同時にidも指定しておきます。
- *2
-
data-theme="b"
カラーパターンを規定しています。a,b,c,d,eのいずれかを値に指定することでカラーを設定できます。
- *3
-
data-role="navbar"
「data-role」を「navbar」に設定することで、ナビゲーションボタンを設置することができます。
- *4
-
data-transition="slide"
ページ遷移のアニメーションを指定できます。
アニメーションには「slide(ページが横にスライド)」のほか、「slideup(ページが下から上にスライド)」「slidedown(ページが上から下にスライド)」「pop(ページが拡大しながら切り替わる)」「fade(フェードインで切り替わる)」などがあります。
デフォルトの状態でもSmartphoneライクなインターフェースを実現できるjQuery Mobileですが、htmlやcssの編集をすれば、レイアウト/デザインのカスタマイズも可能になります。
