Question

我正在尝试使用JQUERY UI，但我遇到了问题。我想在对话框中选择按钮，然后在我的页面中执行某些操作。这些是我用来生成对话框的代码：

<script type="text/javascript">
        $(function(){

            // Dialog
            $('#dialog').dialog({
                resizable: false,
                autoOpen: false,
                width: 300,
                height: 140,
                modal: true,
                buttons: {
                    "Ok": function() {
                        $(this).dialog("close");
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });

            // Dialog Link
            $('#dialog_link').click(function(){
                $('#dialog').dialog('open');
                return false;
            });

        });
    </script>
<body>
    <a href="#" id="dialog_link">Open Dialog</a>
    <!-- ui-dialog -->
    <div id="dialog" title="Dialog Title">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
</body>

Answer 1

您可以通过调用与该按钮相关的功能来关注每个$(this).dialog("close");行。您有两次对话框关闭线，每个按钮一次，因此每个按钮都可以跟随不同的函数调用。

Answer 2

基本上，jQuery负责知道按下了什么按钮。因此，在创建对话框期间，您可以指定要对每个按钮的单击事件执行的操作。

您可以直接调用特定函数或编写代码行，如下所示：

buttons: {
    "Ok": function() {
        $(this).dialog("close");
        console.log("Inline code example");
        myOkFunction();
    },
    "Cancel": function() {
        $(this).dialog("close");
        myCancelFunction();
    }
}

function myOkFunction(){
    //Something that will happen on "Ok" button clicked.
}

function myCancelFunction(){
    //Something that will happen on "Cancel" button clicked.
}

但是，您可以在执行期间通过调用窗口小部件选项来更改要执行的代码，如下所示：

$(yourDialog).dialog("option","buttons",{
    "Ok":function(){
        var i = 0; //Inline code example
        this.Dialog("close");
        myNewOkFunction();    
    }
});

请注意，这会覆盖对话框中的所有按钮，因此如果您有多个按钮，则需要重新编写它们。

使用Jquery UI对话框，我想知道确定按钮选择或取消按钮

2 个答案: