jQuery Mobileでヘッダに「戻る」ボタンを配置する方法

ヘッダーの部分に、data-rel="back"を配置すればいい。
data-iconにはアイコンを指定する。

<div data-role="header">
	<a href="hoge.dummy" data-icon="back" data-rel="back">前へ</a>
	<h1>jQuery Mobileさん</h1>
</div>

jQuery Mobileでヘッダにホームボタンを配置する方法

ヘッダにhref属性にホームページとなるhtmlを指定し、data-icon="home"を指定する。

<div data-role="header">
	<a href="home.html" data-icon="home">ホーム</a>
	<h1>jQuery Mobileさん</h1>
</div>

jQuery Mobileでボタンの配置の位置を変更したい場合

<a href="sample.html" data-icon="home" class="ui-btn-right">ホーム</a>

のように、class属性にui-btn-rightかleftを指定すればいい。
アイコンには色々あって、

<a href="sample.html" data-icon="gear" class="ui-btn-right">ギアセカンド!</a>

このように、data-iconを色々と指定して、アイコンを変更することができる。

jQuery Mobileのボタンアイコンの一覧は以下のURLを参照。
http://dev.screw-axis.com/doc/jquery_mobile/components/buttons/buttons_icons/

jQuery Mobileでフッタにボタンを配置する

<div data-role="footer">
	<a href="test.html" data-role="button" data-icon="home">ホーム</a>
	<a href="test.html" data-role="button" data-icon="info">info</a>
	<a href="test.html" data-role="button" data-icon="star">お気に入り</a>
</div>

読んだ本

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

  • 作者: 大津真
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2013/03/21
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

感謝のプログラミング

今回で感謝のプログラミングは【650時間目】
10000時間まで、あと【9350時間】