以下の解決策を試すことができます。
投稿の最後に完全な動作例 (コード + スクリーンショット) が提供されていることに注意してください...
1 -ポップアップ ボックス内のすべてのオプションにクラス (例 :) を追加します。myopt#popupStatus
さらに 2 つのオプション (ValidateおよびCancel) を使用した例:
<div data-role="popup" id="popupStatus" data-theme="c" data-overlay-theme="a" style="max-width: 500px;">
<!-- BACK BUTTON -->
<a href="#" data-rel="back" data-role="button" data-theme="a"
data-icon="delete" data-iconpos="notext" class="ui-btn-right">
Close
</a>
<!-- HEADER -->
<div data-role="header" data-theme="a">
<h1>Status</h1>
</div>
<!-- CONTENT -->
<div data-role="content" data-theme="d" data-backbtn="false">
<h3>Choose an Action:</h3>
<!-- OPTIONS -->
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Change
</a>
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Validate
</a>
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Cancel
</a>
</div>
</div>
2 -メッセージを表示するポップアップの ID 属性 (例: ) を定義し、 「統合」する動的メッセージを含むタグ (例: ) を含めます (ポップアップ):#popup_optionAre you sure?<span><span id="myoption"></span>#popupStatus
<!-- POPUP BOX - FOR OPTIONS -->
<div data-role="popup" id="popup_option"
data-theme="a" class="ui-corner-bottom ui-content" data-overlay-theme="a">
<div data-role="content">
<h3 class="ui-title">Are you sure?</h3>
<!-- INLCUDE THE SPAN TAG -->
<p>This action will <span id="myoption"></span> the ticket.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">
Cancel
</a>
<a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">
OK
</a>
</div>
</div>
3 -ポップアップ ボックスのオプションに対して次のクリック イベント関数を定義します#popupStatus。
$(".myopt").click(function() {
var ind = $(this).index();
var toset = "";
switch(ind) {
case 1:
toset = "change";
break;
case 2:
toset = "validate";
break;
case 3:
toset = "cancel";
break;
};
$("#myoption").html(toset);
$( "#popupStatus" ).popup("close");
setTimeout( function(){ $( '#popup_option' ).popup( 'open', { transition: "flow" } ) }, 100 );
});
上記の関数は次のことを行います。
まず、クリックされたオプションのインデックスをポップアップ ボックス#popupStatusで取得し、それを変数に格納しますind。 オプション、、 またはが (それぞれ) クリックされた場合、 、、 またはindと等しくなります。123ChangeValidateCancel
変数は、ポップアップ ボックスで以前にクリックしたオプションに応じてtoset、ポップアップ ボックス内に動的に「統合」するコンテンツです。に初期設定されています。#popup_option#popupStatus""
switchステートメントから、コード内で、ポップアップから選択したオプションに応じて、変数の値tosetをchange、validate、またはに設定します。cancel#popupStatus
ポップアップ内にあるタグ内tosetの値/コンテンツを含めます<span>#popup_option$("#myoption").html(toset);
ポップアップを閉じて、動的に生成されたメッセージ ( 、、または) を含むファイル#popupStatusを開きます。関数を使用し
てポップアップ ボックスを開く必要があることに気付きました。ポップアップの連鎖が許可されていないため、を使用して直接開くことはできません。#popup_optionchangevalidatecancel
#popup_optionsetTimeout$( '#popup_option' ).popup( 'open', { transition: "flow" } );
以下について言及しているオンラインドキュメントを確認できます。
フレームワークは現在、ポップアップの連鎖をサポートしていないため、あるポップアップから別のポップアップへのリンクを埋め込むことはできません。ポップアップ内にdata-rel="popup"を含むすべてのリンクは、何もしません。
これは、カスタム選択メニューがポップアップを使用して実装されているため、ポップアップ内で機能しないことも意味します。選択メニューをポップアップ内に配置すると、data-native-menu="false"を指定した場合でも、ネイティブの選択メニューとしてレンダリングされます。
チェーンされたポップアップを機能させるための回避策は、呼び出し元のポップアップにバインドされたpopupaftercloseイベントなどでタイムアウトを使用することです。次の例では、最初のポップアップが閉じられると、open メソッドへの遅延呼び出しによって 2 番目のポップアップが開かれます。
完全な例:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(function() {
$(".myopt").click(function() {
var ind = $(this).index();
var toset = "";
switch(ind) {
case 1:
toset = "change";
break;
case 2:
toset = "validate";
break;
case 3:
toset = "cancel";
break;
};
$("#myoption").html(toset);
$( "#popupStatus" ).popup("close");
setTimeout( function(){ $( '#popup_option' ).popup( 'open', { transition: "flow" } ) }, 100 );
});
});
</script>
</head>
<body>
<!-- YOUR JQUERY MOBILE PAGE -->
<div data-role="page" id="my_page">
<div data-role="content">
<a href="#popupStatus" data-role="button" data-rel="popup" data-position-to="window"> Open
Status, Suspend, Restore, Disconnect popup dialog box
</a>
<!--- Status, Suspend, Restore, Disconnect popup dialog box --->
<div data-role="popup" id="popupStatus"
data-theme="c" data-overlay-theme="a" style="max-width: 500px;">
<!-- BACK BUTTON -->
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">
Close
</a>
<!-- HEADER -->
<div data-role="header" data-theme="a">
<h1>Status</h1>
</div>
<!-- CONTENT -->
<div data-role="content" data-theme="d" data-backbtn="false">
<h3>Choose an Action:</h3>
<!-- OPTIONS -->
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Change
</a>
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Validate
</a>
<a href="#" class="myopt"
data-role="button" data-inline="false" data-theme="b">
Cancel
</a>
</div>
</div>
<!-- POPUP BOX - FOR OPTIONS -->
<div data-role="popup" id="popup_option"
data-theme="a" class="ui-corner-bottom ui-content" data-overlay-theme="a">
<div data-role="content">
<h3 class="ui-title">Are you sure?</h3>
<p>This action will <span id="myoption"></span> the ticket.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">
Cancel
</a>
<a href="#" class="ui-corner-all" data-role="button" data-inline="true" data-transition="flow" data-theme="b">
OK
</a>
</div>
</div>
</div><!-- content -->
</div><!-- page -->
</body>
</html>
テストのスクリーンショット:
ページを開く:
上記のボタンをクリックした後：
オプションを選択した後Validate:
お役に立てれば。ご不明な点がございましたら、お気軽にお問い合わせください:)。