无法让 jQuery 调整大小以工作：我做错了什么？答案

【问题标题】：Cannot get jQuery resizable to work: What am I doing wrong?无法让 jQuery 调整大小以工作：我做错了什么？
【发布时间】：2010-10-16 04:41:49
【问题描述】：

这是我尝试测试 jQuery resizable 是否正常工作的简单代码。我使用 google.load 很好地使用了其他 jQuery 组件，并且我尝试将 google.load 换成本地版本，没有任何区别。我已经在 3 个浏览器中进行了测试，我已经从几个演示/教程站点复制了代码（可以在他们的站点上找到它的工作原理）。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=blahblah_obviously changed_blahblah-blahblah_blah_blahblahblah"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script>
<style type="text/css">
   #resizable { width: 100px; height: 100px; background: silver; }
</style>
<script type="text/javascript">
  $(document).ready(function(){
  $("#resizable").resizable();
});
</script>
</head>
<body>  
 <div id="resizable"></div>
</body>
</html>

我没有收到任何错误消息。我无计可施。我究竟做错了什么？为什么连这个简单的案例都不起作用？

更新：jQuery UI 库包含在 google.load("jqueryui", "1.7.1"); 行中

【问题讨论】：

我讨厌 jQuery 和他们粗略的例子！就像在这里一样，如果你能解决这个问题，你很幸运：P

标签： jquery resize

【解决方案1】：

你试过了吗：

<script type="text/javascript">
google.setOnLoadCallback(function() {
  $(function() {
    $("#resizable").resizable();
  });
});
</script>

值得注意的是 google.load() 是一个异步调用，您将无法调用 jQuery 函数，直到它们被加载，因此回调。

好的，看看你的例子，你遇到了一些问题：

这是最大的问题：你没有 jQuery UI 样式表；
您是双重的，包括来自 Google 和本地的 jQuery、jQuery UI 和 SWFObject；
可调整大小的 div 中的最后一个 div 阻止调整大小。不知道为什么，但我评论了它，它工作正常；和
Google 的 AJAX 库 API 不需要 API 密钥。这不会引起问题。仅供参考。

你的工作版本：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("swfobject", "2.1");
google.setOnLoadCallback(function() {
  $(function() {
    $("#resizable").resizable();
  });
});
</script>
<style type="text/css">
  #resizable { width: 100px; height: 100px; background: silver; }
</style>
</head>
<body>
<div id="resizable">
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
  <!--<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>-->
</div>
</body>
</html>

【讨论】：

那行不通。为了证明我试过了，这对我不起作用，转到：bcsfanpoll.com/test/test.php
添加样式表链接解决了它。我没有看到我如何两次包含库？最后一个 div 是由 jQuery（或 Firefox）添加的，它不是我的基本代码的一部分。 <div id="resizable"></div> 是我的代码的一部分，里面什么都没有。感谢您提供无 API 提示。

【解决方案2】：

jQuery UI 在您的示例中运行良好，您遇到的问题是因为您的 last test 中没有包含任何 CSS 主题，并且未显示“可调整大小的句柄”图标。

添加您的own theme 或默认的：

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

查看您的示例here。

【讨论】：

【解决方案3】：

所有你需要的 CSS 来运行 jquery ui .resizable(): （不要忘记将图像保存到本地）

<style type="text/css">
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
</style>

【讨论】：