0

我正在尝试使用 jquery UI（最新）使我的对话框元素可调整大小 我在我的文档中包含了 Jquery 主题 css 和最新的 Jquery UI 库。

但是当我创建我的对话框 HTML 并插入到我的文档中时，可调整大小的功能不会调整大小，调整大小的光标是可见的，并且调整大小的句柄也是可见的，但是当我拖动时没有任何反应！

当我在我的文档中手动插入我的对话框的 HTML 代码并为该对话框应用 resizable() 插件时， resizable() 函数起作用了！

但是当我为我的对话框插入 HTML 代码时

$('body').append($('<div id="dialog">some text</div>')); 然后这样做：

$('#dialog').resizable();

手柄是可见的，但它不会调整大小。

似乎 resizable() 插件不适用于 DOM 中的新元素？

我浪费了一整天的时间来寻找解决方案:(

有没有人知道是怎么回事！

** 编辑 **

我找到了！！resizable() 插件在可调整大小的元素上触发一个事件“resize”，我的插件有一个该事件的侦听器，我认为它仅在我的窗口大小调整时才会触发。

现在我需要更改我的插件并确定窗口是否正在调整大小或者它是否是一个元素。无论如何，谢谢你们！

4

2 回答 2

0

你必须使用 jquery ui 的 css，或者做这样的事情：你可以在没有 css 文件的情况下工作，但你必须将 css 放在 div 元素上。

看看这段代码：

导入 jquery ui 的 css：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

js代码：

<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<div id="dialog" style="border:1px solid black;height: 100px;left: 0;top: 0;width: 100px;">some text</div>');
    $('#dialog').resizable();
});
</script>
于 2013-09-29T15:50:27.393 回答
0

给元素一点时间来渲染

    setTimeout(function(){
        $('#dialog').resizable();
    },500);
于 2017-07-28T01:40:46.063 回答