将Jquery UI对话框添加到按钮

Question

我编写了一个简单的代码测试Jqyery UI对话框，如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="topo.css">
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script>
        plugin = {
            mainPageRenderer: function () {
                var plugin = this;
                var addButton = $('<input id="addButton" class="addButton" type="submit" value="+">');
                addButton.click(plugin.addFU);
                plugin.html = $('<div class="main-page"></div>');
                plugin.html.append(addButton);

            },
            addFU:function(){
                $(this).dialog({
                    buttons: [
                        {
                            text: "OK",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            },
            refresh: function() {
                var plugin = this;
                plugin.mainPageRenderer();
                $("body").append(plugin.html);
            }

        };

        $(document).ready(function() {
            plugin.refresh();
        });
    </script>
</head>
<body>

问题是在JQUERY UI对话框中单击“确定”按钮时，原始页面中的“ +”按钮消失了。 我可以预防吗？

Answer 1

您需要尝试使用

Java脚本

<script type="text/javascript">
$(function(){
    var execute = function() {
        alert('This is Ok button');
    }
    var cancel = function() {
        alert('This is Cancel button');
    }
    var dialogOpts = {
        buttons: {
            "Ok": execute,
            "Cancel": cancel
        }
    };
    $("#myDialog").dialog(dialogOpts);
});
</script>

的HTML

<input id="myDialog" class="addButton" type="submit" value="+">

要么

Java脚本

$('#myDialog').dialog({
                        // properties ... 
                        buttons: [{
                                id:"btn-accept",
                                text: "Accept",
                                click: function() {
                                        $(this).dialog("close");
                                }
                        },{
                                id:"btn-cancel",
                                text: "Cancel",
                                click: function() {
                                        $(this).dialog("close");
                                }
                        }]
                });

将Jquery UI对话框添加到按钮

问题描述

1 个解决方案

解决方案1
0 2014-10-06 12:54:49

将Jquery UI对话框添加到按钮

问题描述

1 个解决方案

解决方案1 0 2014-10-06 12:54:49

解决方案1
0 2014-10-06 12:54:49