jquery - 使用对话框的功能需要包含哪个JS文件

Question

我想打开一个对话框以在单击按钮时进行确认。为此，我使用以下代码

$('#dialog-box').dialog({
                show : 'drop',

……

其中#dialog-box 是按钮的 ID。现在我收到一个错误： Uncaught TypeError: Object [object Object] has no method 'dialog'

需要包含哪个 js 文件才能消除此错误

Answer 1

该.dialog()函数是JQuery UI的一部分。

这是来自 Google 的 CDN 的库。
为确保获得 JQuery UI 所需的一切，您可以从此处下载 或使用他们的在线托管脚本从此处。

这是一个示例脚本

请注意我检索库然后执行脚本的顺序：

1. jQuery
2. jQuery 用户界面
3. 初始化对话框

<!-- JQuery UI stylesheet --> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />

<!-- First get JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Then get JQuery UI -->
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<script>
    $(function() {
        $( "#dialog-box" ).dialog({
            width: "auto",
            height: "auto"
        });
    });
</script>

<div id="dialog-box" title="Getting down with dialog boxes">
    <p>This is how you initialize and use the dialog box.</p>
</div>