最新のWeb開発のチュートリアル
 

jQuery Mobile例


jQueryのモバイルページ

基本的なモバイルWebページ
複数のページ
ダイアログボックス

例について説明しました


jQueryのモバイルトランジション

フェード効果
フリップ効果
効果フロー
ポップ効果
スライド効果
Slidefade効果
Slideup効果
Slidedown効果
効果を回し
いいえトランジション効果はありません
逆効果

例について説明しました


jQueryのモバイルボタン

ボタンを作成します。
インラインボタン
グループ化されたボタン
戻るボタン
ボタンの色を変更します
丸みを帯びた角の有無にかかわらずボタン
小さなまたはレギュラーサイズボタン
影の有無にかかわらずボタン

例について説明しました


jQueryのモバイルボタンのアイコン

ボタンにアイコンを追加します。
複数のアイコン(バージョン1.4で導入されたアイコン)を追加します
位置決めのアイコン
表示のみのアイコン
円(ディスク)を取り外し アイコンの色を変更

例について説明しました


jQueryのモバイルポップアップ

基本的なポップアップを作成します。
ポップアップにパディングとマージンを追加
右の閉じるボタンでポップアップを閉じます
左の閉じるボタンでポップアップを閉じます
Undismissibleポップアップ
ポジショニングのポップアップ
ポップアップを移行
ポップアップ矢印
ポップアップダイアログ
ポップアップの写真

例について説明しました


jQueryのモバイルツールバー

ヘッダーとフッターを作成します。
ヘッダーにボタンを追加
ヘッダに左側にボタンを追加します。
ヘッダーで右側にボタンを追加します。
ボタン付きのフッター
中央に整列ボタンとフッター
水平方向にグループ化されたボタンを持つフッター
インライン位置-ページのコンテンツとヘッダーとフッターインライン
固定位置-ヘッダーとフッターは、ページの上部と下部に配置されたままになります
フルスクリーンの位置-ヘッダーとフッターはなく、ページコンテンツの上に、上部と下部に配置されたまま

例について説明しました


jQueryのモバイルナビゲーションバー

ナビゲーションバーを作成します。
ナビゲーションボタンのアイコン
コンテンツのナビゲーションバー
フッタのナビゲーションバー
追加選択(押下)ナビゲーションバーのボタンを探してください
選択を追加します(押下)持続的に見えます
位置決めのアイコン:トップアライメント
位置決めのアイコン:右揃え
位置決めのアイコン:下のアライメント
位置決めのアイコン:左揃え
ナビゲーションバーの10個のボタンのデモンストレーション

例について説明しました


jQueryのモバイルパネル

基本的なパネルを作成します。
閉じるボタンとパネル
パネルの表示を変更します
パネル右の位置
固定されたパネル位置

例について説明しました


jQueryのモバイルCollapsibles

コンテンツの折りたたみ可能なブロックを作成します。
ページのロード時にコンテンツを展開します
ネストされた折り畳み可能なブロック
折りたたみセット(アコーディオン)
collapsiblesに丸みを帯びた角を削除します
collapsiblesを小さくします
collapsiblesのアイコンを変更
collapsiblesのアイコンの位置を変更します

例について説明しました


jQueryのモバイルテーブル

リフローテーブルを作成します。
コラムトグルテーブルを作成します。
トグルテーブルボタンのテキストを変更
テーブルに影を追加します。
すべてのテーブルの行に下の枠線を追加します。
すべてのテーブルの行に背景色を追加

例について説明しました


jQueryのモバイルグリッド

2列のレイアウト
3列レイアウト
4列のレイアウト
五列のレイアウト
グリッドのカスタマイズ
列内に複数の行

例について説明しました


jQueryのモバイルリスト

リストビューを作成します。
角の丸いリストビュー
リストディバイダー
Autodividers
読み取り専用リストを作成
リスト項目にパネルを挿入します
リストアイテムの変更デフォルトのリンクアイコン
アイテムを一覧表示するアイコンを追加します。
アイテムを一覧表示するサムネイルを追加
情報を使用してリスト項目を埋めるためにHTML要素を追加します。
スプリットボタンを持つリストを作成
リスト項目をより機能させます
カウントの泡を作ります
ポップアップリスト
折りたたみリスト
折りたたみポップアップリスト
全角折りたたみ可能なリスト
カレンダーを作成

例について説明しました


jQueryのモバイルフィルタ

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

例について説明しました


jQueryのモバイルフォーム

テキストの入力
入力ボタンのアイコンを追加します
入力中の「クリア」ボタンを追加します
テキスト領域
検索入力
ラジオボタン
チェックボックス
水平グループのラジオボタンやチェックボックス
ラジオボタンやチェックボックスとフィールドコンテナ
事前選択のラジオボタン/チェックボックス
ポップアップの内部にフォームを配置します
自動的にタップ可能な要素のスタイルをjQueryのモバイルを防ぎます
選択メニューを作成します。
デバイダ(OPTGROUP)との選択メニューを作成します。
カスタム選択メニュー
選択メニューで複数のオプションを選択します
グループの選択メニュー
水平グループの選択メニュー
縮小する選択メニュー
オプションを事前選択
ポップアップの選択
折りたたみフォーム
デフォルトの選択アイコンを変更
アイコンの位置を変更します
スライダコントロールを作成します。
スライダボタン上の値を表示
ユーザーのスライドのように画面上の値ポップアップを作ります
スライダ値までのトラックをハイライト
範囲スライダ(デュアル)
フリップトグルスイッチを作成します。
フリップスイッチ上のテキストを変更
フリップスイッチを事前選択
フリップスイッチをスタイル

例について説明しました


jQueryのモバイルテーマ

テーマの「a」
テーマ「B」
テーマのヘッダーとフッター
テーマ設定ダイアログ
テーマボタン
テーマのアイコン
テーマのポップアップ
ヘッダーとフッターのテーマ設定ボタン
テーマのナビゲーションバー
テーマパネル
折りたたみ可能なボタンやコンテンツをテーマ設定
テーマリスト
スプリットボタンをテーマ設定
折りたたみ可能なリストをテーマ設定
テーマ設定フォーム
折り畳み式の形をテーマ設定
テーマのカスタマイズ

例について説明しました


jQueryのモバイルイベント

タップイベント
Tapholdイベント
スワイプイベント
Swipeleftイベント
Swiperightイベント
Scrollstartイベント
Scrollstopイベント
Orientationchangeイベント-アラート向き
Orientationchangeイベント-肖像画や風景のための設定の異なるスタイル
ページの初期化イベント
ページロードイベント
ページ遷移イベント

例について説明しました