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

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

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

<スポンサーリンク>

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コーディング

感謝のプログラミング

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