ダイアログ - 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.その他 フロー ポップ フェード ターン フリップ
デモ
1.スライド系 スライド スライドアップ スライドダウン スライドフェード
2.その他 フロー ポップ フェード ターン フリップ