h2ospace

[jQuery Mobile] ヘッダーにボタンをつける

2011-02-01 19:00:30

jQuery Mobileのヘッダには、左右にボタンを付加することができます。こうすることで、iPhoneの設定画面などでよくある「戻る」ボタンや「保存」ボタンなどを画面上部に配置できます。

data-role属性が「header」となっているエリアに、次のように組み込みます。

[xml]
<div data-role="header">
<a href="index.html" data-icon="delete">キャンセル</a>
<h1>ツールバー</h1>
<a href="index.html" data-icon="check">OK</a>
</div>
[/xml]

「data-icon」属性の中は、次のような種類があり、それぞれのアイコンが表示されます。

  • alert alert
  • arrow-d arrow-d
  • arrow-l arrow-l
  • arrow-r arrow-r
  • arrow-u arrow-u
  • back back
  • check check
  • delete delete
  • forward forward
  • gear gear
  • grid grid
  • info info
  • minus minus
  • plus plus
  • refresh refresh
  • star star

»サンプルへ

[PR] たにぐちまことのJavaScript/jQuery Mobile入門講座 | ロクナナワークショップ

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]