jQuery Mobile例文辞典 (1.4.0α2)

このページはjQuery Mobileの用例/サンプルを扱っています。ここではjQuery Mobile 1.4.0α2を使用しています。jQueryはバージョン1.10.2を使用しています。

jQuery Mobile 1.4.0 Alpha 2 released (jQuery Mobile公式ブログ)

×印は1.4.0α2で廃止になった機能です。
印は動かない機能か、変更があって動かないか、何らかの設定が必要だと思われるものです。

*勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。


Last update:2013/8/28 AM 5:25

ページレイアウト/ページ構成

  1. ページのコンテンツ領域を指定する
  2. 複数のページを用意する
  3. ページのヘッダー領域を指定する
  4. ページのフッター領域を指定する
  5. フッターを固定する
  6. 共通の固定フッターを設定する
  7. フルスクリーン(全画面)モードにする

ページリンク/ページ移動

  1. 同じHTMLファイル名にあるページに移動する
  2. 外部のページに移動する
  3. ヘッダーに前のページに戻るボタンをつける
  4. 戻るボタンに表示される文字を変更する
  5. ヘッダーにナビゲーションボタンを配置する
  6. フッターに複数のボタンを配置する
  7. フッターにナビゲーションボタンを配置する
  8. ページ移動時の切り替え方法を指定する(1.1RC1で変更あり)
  9. ページ移動時の切り替え方向を逆方向にする(1.1RC1では要修正)

テーマ(外観)

  1. ページ全体のテーマ(外観)を指定する
  2. 特定の部分のみテーマ(外観)を指定する

ダイアログ

  1. ダイアログを表示する
  2. ダイアログの表示方法を指定する

ポップアップ

  1. ポップアップを表示する(1.2.0αで追加)
  2. ウィンドウ中央にポップアップを表示する(1.2.0αで追加)

入力フォーム

  1. スライダーを表示する
  2. スライダー値のステップ(間隔)を指定する(1.1RC1で追加)
  3. スライダーのバーをハイライト表示する(1.1RC1で追加)
  4. 小さいスライダーにする(1.1RC1で追加)
  5. 範囲を指定できるスライダーにする(1.3.0βで追加)
  6. 範囲を指定できるスライダーでステップ(移動量)を指定する(1.3.0βで追加)
  7. 範囲を指定できるスライダーで範囲をハイライトしないようにする(1.3.0βで追加)
  8. 範囲を指定できるスライダーのサイズを小さくする(1.3.0βで追加)
  9. フリップスイッチを表示する
  10. 小さいフリップスイッチにする(1.1RC1で追加)
  11. ラジオボタンを表示する
  12. ラジオボタンを水平に表示する
  13. 小さいラジオボタンにする(1.1RC1で追加)
  14. チェックボックスを表示する
  15. チェックボックスを水平に表示する
  16. 小さいチェックボックスにする(1.1RC1で追加)
  17. セレクトメニューを表示する
  18. セレクトメニューをjQuery Mobile独自のものにする
  19. カスタムセレクトメニューのタイトルを設定する
  20. ネイティブのフォームとして表示する
  21. ボタンの幅を文字数に合わせる
  22. ボタンに表示されるアイコンの位置を指定する

ボタン

  1. リンク(a要素)をボタン形状にする
  2. ×印がついたボタン(キャンセルボタン)を表示する
  3. チェックマークがついたボタンを表示する
  4. 歯車マーク(オプション/設定)がついたボタンを表示する
  5. ヘッダーにあるボタンを右側に表示する
  6. 四角いボタン形状にする
  7. ボタンに左または右の矢印アイコンを表示する
  8. ボタンに上または下の矢印アイコンを表示する
  9. ボタンに×印のアイコンを表示する
  10. ボタンに+印のアイコンを表示する
  11. ボタンに-印のアイコンを表示する
  12. ボタンにチェックマークのアイコンを表示する
  13. ボタンに歯車(設定)マークのアイコンを表示する
  14. ボタンに更新マークのアイコンを表示する
  15. ボタンに前後移動のアイコンを表示する
  16. ボタンにグリッドアイコンを表示する
  17. ボタンにスター(★)アイコンを表示する
  18. ボタンにアラート(警告)アイコンを表示する
  19. ボタンにインフォーメーション(情報)アイコンを表示する
  20. ボタンにホーム(家)アイコンを表示する
  21. ボタンに検索(虫眼鏡)アイコンを表示する
  22. ボタンサイズを表示する文字幅にあわせる
  23. ボタンをグループ化する
  24. ボタングループを水平に表示する

リスト

  1. リストを表示する
  2. リスト(入れ子/ネスト)を表示する
  3. 分割リストを表示する
  4. 角丸の立体的なリストを表示する
  5. リスト項目を区切る見出しを表示する
  6. リスト項目を区切る見出しのテーマを表示する
  7. 分割リストのアイコンを設定する
  8. リストの右上に文字を表示する
  9. 数値(カウントバブル)を表示する
  10. 数値(カウントバブル)のテーマを設定する×
  11. リスト項目に画像を入れる
  12. 検索フィルタを表示しリスト項目を検索できるようにする
  13. 検索フィルタエリア内に任意の文字を表示する

パネル/パネルウィジェット

  1. 開閉パネルを表示する
  2. 開閉パネルを最初から展開して表示する
  3. アコーディオンパネルを表示する
  4. パネルウィジェットを表示する(1.3.0βで追加)
  5. パネルウィジェットの表示位置を指定する(1.3.0βで追加)
  6. パネルウィジェットの切り替え方法を指定する(1.3.0βで追加)

グリッド(整列)

  1. ページを左右2つの領域に分割する
  2. ページを3つ(左中右)の領域に分割する
  3. ページを4つの領域に分割する
  4. ページを5つの領域に分割する

グローバル設定

  1. 検索の×ボタンのツールチップの文字を設定する(1.1.0RC2で追加)