ダイアログ - dialog
①ダイアログ - dialog(同html内で作成)
☆ソース 1.まずダイアログ本体を作成します。
ダイアログ
決定
キャンセル
※ダイアログはソースの途中に入れても表示できません。<div data-role="page"></div>の外に作り独立で作成します。 2.ダイアログへのリンクの作成
ダイアログへ
※<a>タグのhref="○○"とdialog側のid="○○"を一致させることでジャンプできます。
ダイアログボタンの説明は最後に説明しますので、今はとりあえず左上の×ボタンで戻ってください。
デモ
ダイアログへ
③ダイアログ - dialog(別htmlで作成)
☆ソース 1.まずダイアログ本体を作成します。
ダイアログ
決定
キャンセル
これをdialog.htmlとして保存します。 2.ダイアログへのリンクの作成
ダイアログへ
※作成したファイル名と一致させることでジャンプできます。
デモは上記と同じ結果になるので、割愛します。
CHECK!! ①と②の使い分け
①では、簡単に実装できることから
そのページのみで使うダイアログ
に効果的です。
同じファイルの中にダイアログを作るため、別ファイルを作成する必要がありません。
補足:こちらはダイアログを作って、そこにジャンプするイメージです。
②では、
複数のページで使うダイアログ
に効果的です。
同一ファイル内しか飛べない①では、使う分だけコピー&ペーストしなければなりません。
補足:こちらはページを作って呼び出す時に、ダイアログに変換しているイメージです。
③ボタン遷移付きダイアログ
☆ソース 1.キャンセル・戻るボタン
キャンセル
2.ジャンプボタン
決定
※①、②のそれぞれのボタンを上記のコードに書き換えてください。
↓のデモのように、ダイアログからダイアログに飛ぶことも可能です。
デモ
ダイアログへ
④アクション付き遷移
☆ソース 1.スライド系
スライド
スライドアップ
スライドダウン
スライドフェード
2.その他
フロー
ポップ
フェード
ターン
フリップ
※ブラウザによっては機能しない場合があります。
デモ
1.スライド系
スライド
スライドアップ
スライドダウン
スライドフェード
2.その他
フロー
ポップ
フェード
ターン
フリップ
ダイアログ
決定
キャンセル
ダイアログ
決定
キャンセル
ファイナルアンサー??
ファイナルアンサー
戻る