4

我有一个像这样的 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>
4

1 回答 1

5

您可以尝试以下解决方案。

请注意，帖子末尾提供了一个完整的工作示例（代码+屏幕截图） ...

1 -在弹出框中的所有选项中添加一个类（例如 ：） 。myopt#popupStatus

Validate带有另外 2 个选项（和）的示例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将等于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_optionsetTimeout$( '#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>

测试截图：

打开页面：

1

点击上图按钮后：

2

选择选项后Validate：

3

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

于 2012-10-09T02:46:28.163 回答