添加JQM"你确定吗？" 对话框提示我的Jquery Mobile PopUp框
我有一个像这样的jQuery Mobile弹出框(见下面的代码),需要在每个选项中添加一个对话框,提示"你确定吗？" 确定或取消:
(注意:我暂时删除了除第一个以外的所有选项以使代码更清晰)
<!--- Status, Suspend, Restore, Disconnect popup dialog box --->
<div data-role="popup" id="popupStatus" data-overlay-theme="a" data-theme="c"
style="max-width:500px;" class="ui-corner-all">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Status</h1>
</div>
<div data-role="content" data-theme="d"
class="ui-corner-bottom ui-content" data-backbtn="false">
<h3 class="ui-title">Choose an Action:</h3>
<a href="edit_ttStatus.cfm?id=<cfoutput>#rsTicketDetail.ttNum#</cfoutput>&id1=<cfoutput>#rsTicketDetail.sta#</cfoutput>" class="ui-corner-all" data-role="button" data-inline="false" data-transition="flow" data-theme="b">Change</a>
</div>
</div>
这是Dialog的代码,但我不确定如何将它与上面的代码"集成":
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure?</h3>
<p>This action will ________ the ticket.</p>
<a href="#" class="ui-corner-all" 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>
您可以尝试以下解决方案.
请注意,帖子末尾提供了完整的工作示例(代码+屏幕截图) ...
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_option :),它将提示消息Are 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意愿等于1,2或3如果选项Change,Validate或者Cancel被点击(分别).变量
toset是我们想要在弹出框中动态"集成"的内容#popup_option,具体取决于我们之前在弹出窗口中单击的选项#popupStatus.它最初设置为"".从
switch语句,在代码中,我们设置变量的值toset来change,validate或者cancel,取决于我们从弹出所选的选项#popupStatus.我们包括价值/内容
toset里面<span>是弹出内标签#popup_option与$("#myoption").html(toset);我们关闭弹出窗口
#popupStatus并打开#popup_option其中包含动态产生的消息(change,validate,或cancel).
我们注意到我们需要#popup_option使用该setTimeout功能打开弹出框.您无法使用直接打开它$( '#popup_option' ).popup( 'open', { transition: "flow" } );,因为不允许链接弹出窗口.
该框架目前不支持弹出窗口的链接,因此无法将一个弹出窗口中的链接嵌入到另一个弹出窗口中.弹出窗口中带有data-rel ="popup"的所有链接都不会做任何事情.
这也意味着自定义选择菜单在弹出窗口内不起作用,因为它们本身是使用弹出窗口实现的.如果在弹出窗口中放置一个选择菜单,即使您指定data-native-menu ="false",它也将呈现为本机选择菜单.
获取链接弹出窗口的解决方法是使用超时,例如在绑定到调用弹出窗口的popupafterclose事件中.在下面的示例中,当第一个弹出窗口关闭时,第二个弹出窗口将通过对open方法的延迟调用打开:
完整示例:
<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:
希望这可以帮助.如果您有任何问题,请告诉我:).
| 归档时间： |
|
| 查看次数： |
7180 次 |
| 最近记录： |