jQuery Mobile

jQuery Mobile は
jQuery ベースのモバイル向けUIを簡単に
構築できるようにしたライブラリ

まず。必要なファイルをダウンロード
http://jquerymobile.com/download

から
jquery.mobile-1.2.１.zip をダウンロード

あとは、解凍して
プロジェクトディレクトリに配置する

unzip コマンドで簡単に解凍可能
unzip jquery.mobile-1.2.1.zip

解凍するといろいろファイルとかディレクトリあるけど
使うのは
images/
jquery.mobile-1.2.1.css
jquery.mobile-1.2.1.js

注意点としては、
css ファイルと
images ディレクトリを同じ階層におかないと
アイコンが表示されなくなるの注意

あとは、このディレクトリのところにHTMLファイルなどを
書いていくことで、スマートフォン向けのものが
作成できます

jQuery Mobile デザインのカスタマイズ

Jquery Mobile でボタンの色などを変更できます

jQuery Mobile Framework - Static Containers, States

でサンプルを見ることができます
ちなみに、こちらは英語なので、わかりにくいときには

ボタンのテーマ色

をみるとわかりやすいです

ベースカラーは5種類あり、
A～Eの表記をします

A＝黒
B＝青
C＝灰色
D＝白
E＝黄色

となっています

指定するには
data-them="b"
というように指定します

<button value="ボタン" data-theme="e"></button>
とすると、ボタンの色が黄色になりますし

<div id="top" dara-role="page" data-theme="e">
とすれば
div タグのところに反映されます

jQueryMobile でリンクをボタンにするには

スマートフォンの場合、画面がパソコンより小さいので
間違えてクリックする可能性が高いため、
できだけ
リンクなどは
ボタンにかえるようにします

やりかたは簡単で
a タグのリンクの場合
<a href="index.html" data-role="button">
戻る
</a>
というように、

dara-role="button" を
追記するとボタンになります

英語のサイトになりますが
Adding Icons to Buttons
でアイコンの一覧もでています

ちなみに、アイコンをつけるなら、
data-icon 属性を使います
もし、戻るアイコンをつけたいのなら

<a href="index.html" data-role="button" data-icon="back">
戻る
</a>

というようにかきます

jQuery Mobile での外部リンク設定

jQuery Mobile で外部リンクをはるには
aタグに
rel="external"
を追記します

これは
jQuery Mobile が基本的に ajax による画面遷移をしているためです
このおかげで画面をリフレッシュせずに切り替えできるのですが
外部サイトにリンクしたり
javascript ファイルを読み込んだりすると
不具合がでる可能性があります

このため、
ローカルサーバーなどなら
<a href="ローカルファイルのパス" rel="external">リンク</a>

外部へのリンクなら
<a href="リンク先のURL" rel="external">リンク</a>

というようにします

例えば Amazon なら
<a href="ｈｔｔｐ：//www.amazon.co.jp" rel="external">アマゾンへとぶ</a>
というようにします

jQuery Mobile で戻るボタン設置

jQuery Mobile で戻るボタンを設置するには
data-add-back-btn="true"
を追記します

追記するのは
<div id="ページID" data-role="page" >
に追記します

<div id="ページID" data-role="page" data-add-back-btn="true">
これで、戻るボタンが追記されます