如何在jQuery Mobile中使用simpledialog創建兩個文本框

Question

我已經看到了以下鏈接，但它對我不起作用。 具有兩個輸入的jQuery Mobile SimpleDialog？

任何人都可以通過查看以下代碼來幫助我。

<script type="text/javascript"> 
            $(document).delegate('#addDialog', 'click', function() {
                $(this).simpledialog({
                    'mode' : 'string',
                    'prompt' : 'Product',
                    'cleanOnClose': true,
                    'buttons' : {
                        'OK': {
                            click: function () { 
                                $('#simplestringout').text($('#addDialog').attr('data-string'));
                            }
                        },
                        'Cancel': {
                            click: function () { console.log(this); },
                            icon: "delete",
                            theme: "c"
                        }
                    }
                })
            });
        </script>

我通過單擊按鈕來調用此功能。

在這里，我正在完美地作為1個文本框。 但是，當我想要兩個文本字段時，我將無法獲得它。

誰能幫我獲得兩個文本框。

Answer 1

我認為要獲得2個輸入，您需要使用空白模式並創建所需的對話框標記。

這是一個示例，其中blankContent屬性用於將具有2個輸入和2個按鈕的標記注入對話框。 然后使用事件委托（.on（））為“確定”按鈕添加處理程序，因為在啟動對話框之前該按鈕不存在：

$(document).on("pageinit", "#page1", function () {
    $(document).on("click", "#openDialog", function () {
        $('<div>').simpledialog2({
            mode: 'blank',
            headerText: 'Product',
            headerClose: true,
            width: "75%",
            blankContent: '<div class="sdCont"><label for="inp1">Text input 1:</label><input id="inp1" type="text" value="" placeholder="Type something..." /><label for="inp2">Text input 2:</label><input id="inp2" type="text" value="" placeholder="Really, go ahead and type..." /><div class="ui-grid-a"><div class="ui-block-a"><button id="btnOK" data-inline->OK</button></div><div class="ui-block-b"><button id="btnCancel" data-theme="c" data-icon="delete" rel="close">Cancel</button></div></div></div>'
        });
    });

    $(document).on("click", "#btnOK", function(){
        alert("Dialog OK clicked!");
        $.mobile.sdCurrentDialog.close();
    });
});

這是一個演示