サンプルホーム

このページは?：jQuery Mobileの挙動について確認するために作りました。

• 同一ページ内移動
• 外部ページへ移動
• 外部ページを同一ページに追加

• Ｘボタン(delete)
• レボタン(check)
• ＊ボタン(gear)
• ＋ボタン(plus)
• －ボタン(minus)
• ＜・＞ボタン(arrow-lr)
• ∧・∨ボタン(arrow-ud)
• ○ボタン(refresh)
• ←・→ボタン(forward,back)
• 田・★ボタン(grid,star)
• ▲・！ボタン(alert,info)

---

• jQuery Mobileの本家サンプル

同一ページ内移動サンプル

• サンプル：この画面に遷移したのがサンプル。
• コード：
  <a href="#move-anchor">同一ページ内移動</a>
• ポイント：ヘッダー部分に自動的に「(<)Back」ボタンが着きます。
• ポイント：URLは、index.html#move-anchor のようになります。
  ここに直アクセスした場合でもこのページが表示されます。
  (jQTouchは常に#homeにリダイレクトされちゃってました。)
• 注意点：アニメーション指定をしなければ、パッと切り替わります。

外部ページへ移動するサンプル

• サンプル：↓下記参照
• googleへ移動
• コード：
  <a rel="external" href="http://google.com/">googleへ移動</a>
• ポイント：rel="external" を付与します。
• 注意点：アニメーション指定することはできません。

ホームへ戻る

外部ページを同一ページに追加するサンプル

• サンプル：↓下記参照
• 外部ページに遷移
• コード：
  <a data-transition="fade" href="sample_parts.html">外部ページに遷移</a>
• ポイント：リンクすればよいが、このページのidがget-externalなので、
  get-external/sample-parts.html に実ファイルを配置する必要があります。
• 注意点：アニメーション指定が可能です。

ホームへ戻る

もどる

Ｘボタンのサンプル

• 形状：角丸四角で(X)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面左上参照。
• コード：
  <div data-role="header" data-position="inline"> <a href="#home" data-icon="delete">Back to home</a> <h1>Ｘボタンのサンプル</h1> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

レボタンのサンプル

保存

• 形状：角丸四角(レ)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面右上参照。
• コード：
  <div data-role="header" data-position="inline"> <h1>レボタンのサンプル</h1> <a href="#" data-icon="check" class="ui-btn-right" onclick="alert('保存しました');return false;">保存</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

＊ボタンのサンプル

Option

• 形状：角丸四角(レ)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面右上参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <h1>＊ボタンのサンプル</h1> <a href="#" data-icon="gear" class="ui-btn-right" onclick="alert('Optionをクリックしました');return false;">Option</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

＋ボタンのサンプル

 

• 形状：角丸四角(+)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面右上参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <h1>＋ボタンのサンプル</h1> <a href="#" data-icon="plus" class="ui-btn-right" onclick="alert('Plusをクリックしました');return false;">Option</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）
• 備考：「(+)」だけのボタンを作りたい場合でも＆nbsp;を入れないと崩れる。半角スペースでも崩れる。

ホームへ戻る

－ボタンのサンプル

 

• 形状：角丸四角(-)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面右上参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <h1>－ボタンのサンプル</h1> <a href="#" data-icon="minus" class="ui-btn-right" onclick="alert('minusをクリックしました');return false;">Option</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）
• 備考：「(-)」だけのボタンを作りたい場合でも＆nbsp;を入れないと崩れる。半角スペースでも崩れる。

ホームへ戻る

戻る

＜・＞ボタンのサンプル

進む

• 形状：角丸四角(＜)アイコン, 角丸四角(＞)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の左右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <a href="#" data-icon="arrow-l" class="ui-btn-left" onclick="alert('左ボタンをクリックしました');return false;">戻る</a> <h1>＜・＞ボタンのサンプル</h1> <a href="#" data-icon="arrow-r" class="ui-btn-right" onclick="alert('右ボタンをクリックしました');return false;">進む</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

上へ

∧・∨ボタンのサンプル

下へ

• 形状：角丸四角(∧)アイコン, 角丸四角(∨)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の左右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <a href="#" data-icon="arrow-u" class="ui-btn-left" onclick="alert('上ボタンをクリックしました');return false;">上へ</a> <h1>∧・∨ボタンのサンプル</h1> <a href="#" data-icon="arrow-d" class="ui-btn-right" onclick="alert('下ボタンをクリックしました');return false;">下へ</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

○ボタンのサンプル

再読込

• 形状：角丸四角(○)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <h1>○ボタンのサンプル</h1> <a href="#" data-icon="refresh" class="ui-btn-right" onclick="alert('再読込をクリックしました');return false;">再読込</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

戻る

←・→ボタンのサンプル

進む

• 形状：角丸四角(←)アイコン, 角丸四角(→)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の左右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <a href="#" data-icon="back" class="ui-btn-left" onclick="alert('戻るボタンをクリックしました');return false;">戻る</a> <h1>←・→ボタンのサンプル</h1> <a href="#" data-icon="forward" class="ui-btn-right" onclick="alert('進むボタンをクリックしました');return false;">進む</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

リスト

田・★ボタンのサンプル

お気入

• 形状：角丸四角(田)アイコン, 角丸四角(★)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の左右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <a href="#" data-icon="grid" class="ui-btn-left" onclick="alert('リストボタンをクリックしました');return false;">リスト</a> <h1>田・★ボタンのサンプル</h1> <a href="#" data-icon="star" class="ui-btn-right" onclick="alert('お気入ボタンをクリックしました');return false;">お気入</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る

ご注意

▲・！ボタンのサンプル

ヘルプ

• 形状：角丸四角(▲)アイコン, 角丸四角(！)アイコン
• 表示場所：左：デフォルト
  右：class="ui-btn-right" を指定
• サンプル：画面上の左右のボタン参照。
• コード：
  <div data-role="header" data-position="inline" data-nobackbtn="true"> <a href="#" data-icon="alert" class="ui-btn-left" onclick="alert('ご注意ボタンをクリックしました');return false;">ご注意</a> <h1>▲・！ボタンのサンプル</h1> <a href="#" data-icon="info" class="ui-btn-right" onclick="alert('ヘルプボタンをクリックしました');return false;">ヘルプ</a> </div>
• 文字数制限：特に無し
  （全角3文字以内が妥当?）

ホームへ戻る