Question

我现在使用jquery ui已经有一段时间了。这是第一次使用1.8但我不确定为什么，但在我看来这个插件已经倒退了。

我从未像现在这样使用Jquery UI那么困难。

首先，文档已过期。

依赖

* UI Core
* UI Draggable (Optional)
* UI Resizable (Optional)

在出错20分钟后尝试并在出错后获取错误（如对话框不是函数）我意识到你需要一些名为“widget.js”的其他javascript文件

所以现在我有了

Jquery 1.4.2.js 
 UI Core.js UI
 Widget.js 
 UI Dialog.js

全部在我的页面上。

然后我做了类似的事情

  $('#Delete').click(function ()
    {
        var dialogId = "DeleteDialogBox";
        var createdDialog = MakeDialogBox(dialogId, "Delete Conformation");

        $('#tabConent').after(createdDialog);
        dialogId = String.format('#{0}', dialogId);

        $(dialogId).dialog({
            resizable: true,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });

      function MakeDialogBox(id, title)
    {
        var dialog = String.format('<div id="{0}" title="{1}"></div>', id, title);
        return dialog;
    }

现在应该做的是它使对话框应该去的地方。之后它应该在我的标签后面。

因此，当用萤火虫观看它时，它会这样做。然而，一旦.dialog（）方法移动了它生成的所有东西并将它放在我的页脚之后。

所以现在我的页脚右下角隐藏着我的页脚下的对话框。我希望它死在中心。在以前的版本中，我认为对话框代码在页面上的位置并不重要，它始终是死中心。

那我错过了什么？ center.js（我不知道这是否存在，但现在看起来你需要100个javascript文件才能使其正常工作）。

Answer 1

尝试“动态”构建一个对话框。

$('<div>test</div>').dialog({/* your options here */});

还获取jQ-UI源的非压缩版本并查看dialog.js - 所有依赖项都写在其标题注释中。

Answer 2

我认为这里的问题是缺少CSS。但是，您可以使这一切变得更简单:)所有这些脚本文件在发布时都会被合并和缩小，例如here's the full version和here's the minified one（此答案时的版本1.8.1）。这样您就可以包含1个脚本文件，而不是关注哪些UI脚本的顺序。

总的来说，你可以通过他们提供的机制下载jQuery UI来大大简化生活，看看the jQuery UI download page。您可以自定义任何内容并下载zip，然后您需要包含以下3个文件： jQuery ， jQuery UI 以及 jQuery UI CSS < / strong>（指向所需的图像）。或者，您可以为所有3使用CDN，如下所示：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" />

如果您对其中一个内置主题感到满意，可以将CDN用于上述所有内容，只需将base替换为主题名称you can find a full list here（只需将1.7.2更改为URL中的当前版本

Jquery UI 1.8.1 Dialog.js遇到很多问题

2 个答案: