jQuery Mobile例文辞典

このページはjQuery Mobileの用例/サンプルを扱っています。ここではjQuery Mobile 1.0RC3を使用しています。正式版が出ましたので、このページはメンテナンスモードで以後更新されません。正式版に対応したページは[jQuery Mobile例文辞典]です。
*勉強用に作成したページなので間違いや勘違いがあるかもしれません。これはまずい/間違っているというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。


【要注意】SONY Tablet S (SGPT11) はデフォルトの状態ではjQuery Mobileは動作しません。これはSONY Tabletのブラウザがデフォルトではクイックビューモードの設定になっているためです。この設定になっていると通常のページも正しく動作しないことがあります。このクイックビューモードの設定を解除するには、ブラウザを起動した後、画面右上の設定ボタンをタップし「設定」を選択します。高度な設定のカテゴリを選択し「クイックビューを有効にする」のチェックを外してください。もし、SONY Tabletもターゲットに含める場合は、ユーザーに対してこれらの設定を促す必要があります。jQuery MobileやJavaScriptでは、この設定を変更することができないためです。
Last update:2011/11/18 AM 4:05

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

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

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

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

テーマ(外観)

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

ダイアログ

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

入力フォーム

  1. スライダーを表示する
  2. フリップスイッチを表示する
  3. ラジオボタンを表示する
  4. ラジオボタンを水平に表示する
  5. チェックボックスを表示する
  6. チェックボックスを水平に表示する
  7. セレクトメニューを表示する
  8. セレクトメニューをjQuery Mobile独自のものにする
  9. カスタムセレクトメニューのタイトルを設定する
  10. ネイティブのフォームとして表示する
  11. ボタンの幅を文字数に合わせる
  12. ボタンに表示されるアイコンの位置を指定する

ボタン

  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. アコーディオンパネルを表示する

グリッド(整列)

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