JQuery 对话框不工作

Question

我已经在我的 header 中加入了：

<head>
    <script type="text/javascript" src="jquery/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css">
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css"></script>
</head>

这是在我的 body 中，我只是想测试一下，但出现错误：

ReferenceError: jQuery is not defined
    factory( jQuery );

<body>
      <script>
          $.extend({ alert: function (message, title) {
                      $("<div></div>").dialog( {
                        buttons: { "Ok": function () { $(this).dialog("close"); } },
                        close: function (event, ui) { $(this).remove(); },
                        resizable: false,
                        title: title,
                        modal: true
                      }).text(message);
                    }
                });

            $.alert('message', 'fileName');
      </script>
    </body>

我不确定为什么对话框在我的代码中不起作用。是我的脚本中遗漏了什么还是其他问题？

Answer 1

尝试在 jQuery 脚本之后包含 jQuery UI 脚本，你需要像这样的它们（因为 jQuery UI 使用 jQuery 因此需要先加载 jQuery)

<head>
    <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css">
    <link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css"></script>
</head>

请注意使用您拥有的脚本版本，"jquery-3.1.1.js"只是一个示例。

我在评论中告诉过您，您不需要 jQuery 脚本中的两个 - 常规脚本和缩小脚本，而不是同时删除它们。所以总结一下

jQuery = jQuery-min
jQuery != jQuery-UI
jQuery-UI 需要先加载 jQuery。

JQuery 对话框不工作

JQuery Dialog box doesn't work

jquery

jquery-ui-dialog