ダイアログ - dialog




 ①ダイアログ - dialog(同html内で作成)  ☆ソース 1.まずダイアログ本体を作成します。 <div data-role="dialog" id="dialog"> <div data-role="header"> <h1>ダイアログ</h1> </div> <div data-role="content"> <a data-role="button">決定</a> <a data-role="button">キャンセル</a> </div> </div> ※ダイアログはソースの途中に入れても表示できません。<div data-role="page"></div>の外に作り独立で作成します。 2.ダイアログへのリンクの作成 <a href="#dialog" data-role="button">ダイアログへ</a> ※<a>タグのhref="○○"とdialog側のid="○○"を一致させることでジャンプできます。     ダイアログボタンの説明は最後に説明しますので、今はとりあえず左上の×ボタンで戻ってください。


  デモ


 ③ダイアログ - dialog(別htmlで作成)  ☆ソース 1.まずダイアログ本体を作成します。 <html> <body> <div data-role="header"> <h1>ダイアログ</h1> </div> <div data-role="content"> <a data-role="button">決定</a> <a data-role="button">キャンセル</a> </div> </body> </html> これをdialog.htmlとして保存します。 2.ダイアログへのリンクの作成 <a href="dialog.html" data-role="button">ダイアログへ</a> ※作成したファイル名と一致させることでジャンプできます。     デモは上記と同じ結果になるので、割愛します。


 CHECK!! ①と②の使い分け


  ①では、簡単に実装できることからそのページのみで使うダイアログに効果的です。
  同じファイルの中にダイアログを作るため、別ファイルを作成する必要がありません。
  補足:こちらはダイアログを作って、そこにジャンプするイメージです。


  ②では、複数のページで使うダイアログに効果的です。
  同一ファイル内しか飛べない①では、使う分だけコピー&ペーストしなければなりません。
  補足:こちらはページを作って呼び出す時に、ダイアログに変換しているイメージです。




 ③ボタン遷移付きダイアログ  ☆ソース 1.キャンセル・戻るボタン <a data-role="button" data-rel="back">キャンセル</a> 2.ジャンプボタン <a href="好きなリンク先" data-role="button">決定</a> ※①、②のそれぞれのボタンを上記のコードに書き換えてください。     ↓のデモのように、ダイアログからダイアログに飛ぶことも可能です。
デモ ダイアログへ



 ④アクション付き遷移  ☆ソース 1.スライド系 <a href="#dialog2" data-role="button" data-transition="slide">スライド</a> <a href="#dialog2" data-role="button" data-transition="slideup">スライドアップ</a> <a href="#dialog2" data-role="button" data-transition="slidedown">スライドダウン</a> <a href="#dialog2" data-role="button" data-transition="slidefade">スライドフェード</a> 2.その他 <a href="#dialog2" data-role="button" data-transition="flow">フロー</a> <a href="#dialog2" data-role="button" data-transition="pop">ポップ</a> <a href="#dialog2" data-role="button" data-transition="fade">フェード</a> <a href="#dialog2" data-role="button" data-transition="turn">ターン</a> <a href="#dialog2" data-role="button" data-transition="flip">フリップ</a>     ※ブラウザによっては機能しない場合があります。
デモ

 1.スライド系 スライド スライドアップ スライドダウン スライドフェード

 2.その他   フロー ポップ フェード ターン フリップ

ダイアログ

決定 キャンセル

ダイアログ

決定 キャンセル

ファイナルアンサー??

ファイナルアンサー 戻る