分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

jquery-mobile – 在我的Jquery Mobile PopUp框中添加一个JQM“你确定吗？”对话框提示

jQuery   发布时间：2022-04-19  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery-mobile – 在我的Jquery Mobile PopUp框中添加一个JQM“你确定吗？”对话框提示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个像这样的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 – 在弹出框#popupStatus中为所有选项添加一个类(例如：myopt).

带有2个以上选项的示例(验证和取消)：

<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),它会提示消息你确定吗？并包含< 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.
>变量toset是我们想要在弹出框#popup_option中动态“集成”的内容,具体取决于我们之前在弹出窗口#popupStatus中单击的选项.它最初设置为“”.
>从switch语句中,在代码中,我们将变量toset的值设置为更改,验证或取消,具体取决于我们从弹出窗口#popupStatus中选择的选项.
>我们在< span>内包含toset的值/内容.弹出式#popup_option中的标签,带有$(“#myoption”).html(toset);
>我们@L_262_29@弹出窗口#popupStatus并打开包含动态生成的消息(更改,验证或取消)的#popup_option.
我们注意到我们需要使用setTimeout函数打开弹出框#popup_option.你不能使用$(‘#popup_option’).popup(‘open’,{transition：“flow”});来直接打开它,因为不允许链接弹出窗口.

You can check the online doc which mentions the following：

完整示例：

<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',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,Disconnect popup dialog Box 
                </a>

                <!--- Status,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选项后：

希望这可以帮助.如果您有任何问题,请告诉我:).

大佬总结

以上是大佬教程为你收集整理的jquery-mobile – 在我的Jquery Mobile PopUp框中添加一个JQM“你确定吗？”对话框提示全部内容，希望文章能够帮你解决jquery-mobile – 在我的Jquery Mobile PopUp框中添加一个JQM“你确定吗？”对话框提示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：jqmjquerymobilepopup一个中对话框我的提示框添加确定
猜你在找的jQuery相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap