jQuery Mobile の例

❮ 前章へ 次章へ ❯

jQuery Mobile ページ

基本的な mobile web ページ
複数ページ
ダイアログ・ボックス

例の説明


jQuery Mobile 遷移

フェード効果
フリップ効果
フロー効果
ポップ効果
スライド効果
スライド・フェード効果
スライドアップ効果
スライドダウン効果
ターン効果
遷移効果なし
反転効果

例の説明


jQuery Mobile ボタン

ボタンの作成
インライン・ボタン
グループ化されたボタン
戻るボタン
ボタンの色の変更
角丸のあるボタンと無いボタン
小さなボタンと通常サイズのボタン
陰のあるボタンと無いボタン

例の説明


jQuery Mobile ボタン・アイコン

ボタンにアイコンを追加する
アイコンを追加する(バージョン1.4で導入されたアイコン)
アイコンの配置
アイコンのみを表示する
円(ディスク)を削除する
アイコンの色を変更する

例の説明


jQuery Mobile ポップアップ

基本的なポップアップを作成する
ポップアップにパディングとマージンを追加する
右の閉じるボタンでポップアップを閉じる
左の閉じるボタンでポップアップを閉じる
不可能なポップアップ
ポップアップの配置
ポップアップのトランジション
矢印のポップアップ
ダイアログのポップアップ
写真のポップアップ

例の説明


jQuery Mobile ツールバー

ヘッダーとフッターを作成する
ヘッダーにボタンを追加する
ヘッダーの左側にボタンを追加する
ヘッダーの右側にボタンを追加する
ボタン付きフッター
中央揃えのボタンがあるフッター
横にグループ化されたボタンを持つフッター
インライン配置 - ヘッダとフッタがページコンテンツと共にインライン
固定配置 - ヘッダとフッタがページの上部と下部に配置されたままになる
全画面配置 - ヘッダとフッタが、ページコンテンツの上と下に配置されたままになる

例の説明


jQuery Mobile ナビゲーションバー

ナビゲーションバーを作成する
ナビゲーションボタンのアイコン
コンテンツ内のナビゲーションバー
フッター内のナビゲーションバー
ナビゲーションバーにボタンの選択された(押下された)外観を追加する
永続的に選択された(押下された)外観を追加する
アイコンの配置:上揃え
アイコンの配置:右揃え
アイコンの配置:下揃え
アイコンの配置:左揃え
ナビゲーションバーに 10 個のボタンのあるデモ

例の説明


jQuery Mobile パネル

基本パネルを作成する
閉じるボタンを持つパネル
パネルの表示を変更する
右に配置したパネル
固定パネルの配置

例の説明


jQuery Mobile 折畳み

折畳み可能なコンテンツブロックを作成する
ページの読み込み時にコンテンツを展開する
ネストした折畳み可能なブロック
折畳みの集合(アコーディオン)
折畳みの丸い角を取り除く
折畳みを小さくする
折畳みのアイコンを変更する
折畳みのアイコンの位置を変更する

例の説明


jQuery Mobile テーブル

画面幅でレイアウトが異なる(リフロー)テーブルの作成
カラム・トグル・テーブルを作成する
トグル・テーブル・ボタンのテキストを変更する
テーブルに影を追加する
すべてのテーブル行に下ボーダーを追加する
すべてのテーブル行に背景色を追加する

例の説明


jQuery Mobile グリッド

2 カラム・レイアウト
3 カラム・レイアウト
4 カラム・レイアウト
5 カラム・のレイアウト
グリッドのカスタマイズ
カラム内の複数行

例の説明


jQuery Mobile リスト

リストビューの作成
角丸付きのリストビュー
リストのディバイダ
オートディバイダ
読み取り専用リストを作成する
リストアイテムにパネルを挿入する
リスト項目のデフォルトリンクアイコンを変更する
リスト項目にアイコンを追加する
リスト項目にサムネイルを追加する
情報でリスト項目を埋めるため HTML 要素を追加する
分割ボタンでリストを作成する
リスト項目をより機能的にする
カウントバブルを作成する
ポップアップリスト
折畳み可能なリスト
折畳み可能なポップアップリスト
全幅折畳みリスト
カレンダーを作成する

例の説明


jQuery Mobile フィルタ

リストの検索フィールドを作成する
検索フィールド内のテキストを変更する
カスタムフィルタ
折畳み可能なリストをフィルタリングする
テーブルのフィルタリング
<div> 要素をフィルタリングする

例の説明


jQuery Mobile フォーム

テキスト入力
入力ボタンにアイコンを追加する
入力に「クリア」ボタンを追加する
テキスト・エリア
検索入力
ラジオボタン
チェックボックス
ラジオボタンとチェックボックスを横にグループ化する
ラジオボタンとチェックボックスを持つフィールドコンテナ
ラジオボタン/チェックボックスの事前選択
ポップアップ内にフォームを配置する
jQuery Mobile がタップ可能な要素を自動的にスタイルするのを抑止する
select メニューを作成する
ディバイダ付きの select メニューを作成する(optgroup)
カスタム select メニュー
select メニューで複数の選択肢を選択する
グループ select メニュー
select メニューを横にグループする
select メニューを縮小する
オプションの事前選択
select のポップアップ
折畳み可能なフォーム
デフォルトの select アイコンを変更する
アイコンの位置を変更する
スライダ・コントロールを作成する
スライダ・ボタンに値を表示する
ユーザのスライドとして画面に値をポップアップする
トラックをスライダの値までハイライトする
範囲スライダ(デュアル)
フリップ・トグル・スイッチを作成する
フリップ・スイッチのテキストを変更する
フリップ・スイッチの事前選択
フリップ・スイッチをスタイルする

例の説明


jQuery Mobile テーマ

テーマ "a"
テーマ "b"
ヘッダとフッタのテーマ作成
ダイアログのテーマ作成
ボタンのテーマ作成
アイコンのテーマ作成
ポップアップのテーマ作成
ヘッダとフッタのテーマボタン
ビゲーションバーのテーマ作成
パネルのテーマ作成
折りたたみ可能なボタンとコンテンツのテーマ作成
リストのテーマ作成
分割ボタンのテーマ作成
折畳み可能なリストのテーマ作成
フォームのテーマ作成
折畳み可能なフォームのテーマ作成
テーマのカスタマイズ

例の説明


jQuery Mobile イベント

タップイベント
タップフォールドイベント
スワイプイベント
Swipeleft イベント
Swiperight イベント
Scrollstart イベント
Scrollstop イベント
Orientationchange イベント - 向きをアラートする
Orientationchange イベント - portrait と landscape の異なるスタイルを設定する
ページ初期化イベント
ページロード・イベント
ページ遷移イベント

例の説明


❮ 前章へ 次章へ ❯