Question

我遇到了让对话框变为可拖动和可调整大小的问题。关于这一切的所有文档和问题都使它听起来很简单，但我无法让它发挥作用。知道我可能做错了吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <SCRIPT TYPE="text/javascript" SRC="js/jquery-ui-1.8.10.custom.min.js"></SCRIPT>
    <SCRIPT TYPE="text/javascript">
$(document).ready(function(){
 $('#dialog-form').dialog({
//  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  draggable: true,
  resizable: true,
  buttons: {
   Cancel: function() {
    $( this ).dialog( "close" );
   }
  },
  close: function() {
   alert('here');
  }
 });
});
    </SCRIPT>
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
        <style>
#dialog-form label {float:left; width:100px;}
</style>
</head>
<body>

<div id="dialog-form" title="Create new product">
    <form>
    <fieldset>
        <label for="pt">Product Type</label>
        <input type="text" name="pt" id="pt" class="text ui-widget-content ui-corner-all" />
  <br>
        <label for="prod">Producer</label>
        <input type="text" name="prod" id="prod" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
</div>

</body>
</html>

Answer 1

这是因为可拖动脚本不是自包含的。您还需要包含一个鼠标事件处理库。

<script src="...../ui/jquery.ui.mouse.js"></script>

另外

<script src="...../ui/jquery.ui.draggable.js"></script>

性能 - 注意：删除和拖动功能会增加大约45kb（未压缩）的其他javascript。这几乎是从jquery-ui获取基本UI功能所需的代码。

Answer 2

必须在你的代码中出现错误的内容......你是否有效地按正确的顺序加载所有内容？

JsBin＆gt;中的代码http://jsbin.com/uqahu3/edit

开箱即用。

Answer 3

我的猜测是你正在使用IE 6并且遇到了问题。如果您使用的是IE 6，请尝试包含bgiframe.js http://docs.jquery.com/Plugins/bgiframe

jQuery UI对话框不可拖动或可调整大小

3 个答案: