无法调整jQuery的工作大小：我做错了什么？_Jquery_Resize

无法调整jQuery的工作大小：我做错了什么？

jquery

无法调整jQuery的工作大小：我做错了什么？,jquery,resize,Jquery,Resize,下面是我的简单代码，用于测试jQuery Resizeable是否正常工作。我使用google.load可以很好地使用其他jQuery组件，并且我已经尝试将google.load替换为本地版本，没有任何区别。我已经在3个浏览器中进行了测试，我从几个演示/教程站点（在它们的站点上可以找到）复制了代码 load（“jquery”，“1.3.2”）；google.load（“jqueryui”，“1.7.1”）； #可调整大小{宽度：100px；高度：100px；背景：银色；} $（文档）.read

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


load（“jquery”，“1.3.2”）；google.load（“jqueryui”，“1.7.1”）；
#可调整大小{宽度：100px；高度：100px；背景：银色；}
$（文档）.ready（函数（）{
$（“#可调整大小”）.resizable（）；
});

我没有收到任何错误消息。我束手无策。我做错了什么？为什么这个简单的案例都不起作用

更新：jqueryui库包含在google.load（“jqueryui”、“1.7.1”）行中

您是否尝试过：

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


setOnLoadCallback（函数（）{
$（函数（）{
$（“#可调整大小”）.resizable（）；
});
});

值得注意的是，google.load（）是一个异步调用，在jQuery函数被加载之前，您将无法调用它们，因此需要回调

好的，看看你的例子，你有几个问题：

这是最大的：您没有jQueryUI样式表

你是双重的，包括来自谷歌和本地的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>


load（“jquery”，“1.3.2”）；
google.load（“jqueryui”，“1.7.1”）；
加载（“swfobject”，“2.1”）；
setOnLoadCallback（函数（）{
$（函数（）{
$（“#可调整大小”）.resizable（）；
});
});
#可调整大小{宽度：100px；高度：100px；背景：银色；}

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

添加您的或默认值：

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

查看您的示例。

获取工作jquery ui所需的所有CSS。resizeable（）：（不要忘记将图像保存到本地）


.ui图标{宽度：16px；高度：16px；背景图像：url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{IConContent}*/；}
.ui可调整大小{位置：相对；}
.ui可调整大小的句柄{位置：绝对；字体大小：0.1px；z索引：99999；显示：块；}
.ui可调整大小已禁用.ui可调整大小句柄.ui可调整大小自动隐藏.ui可调整大小句柄{显示：无；}
.ui-resizeable-n{光标：n-resize；高度：7px；宽度：100%；顶部：-5px；左侧：0px；}
.ui-resizeable-s{光标：s-resize；高度：7px；宽度：100%；底部：-5px；左侧：0px；}
.ui-resizeable-e{光标：e-resize；宽度：7px；右侧：-5px；顶部：0px；高度：100%；}
.ui-resizeable-w{光标：w-resize；宽度：7px；左侧：-5px；顶部：0px；高度：100%；}
.ui可调整大小se{光标：se调整大小；宽度：12px；高度：12px；右侧：1px；底部：1px；}
.ui可调整大小的sw{光标：sw调整大小；宽度：9px；高度：9px；左侧：-5px；底部：-5px；}
.ui可调整大小的nw{光标：nw调整大小；宽度：9px；高度：9px；左侧：-5px；顶部：-5px；}
.ui可调整大小的ne{光标：ne调整大小；宽度：9px；高度：9px；右侧：-5px；顶部：-5px；}
.ui图标gripsmall对角线se{背景位置：-64px-224px；}

这不起作用。为了证明我试过了，但这对我不起作用，goto:添加样式表链接解决了这个问题。我看不出我是如何两次包括图书馆的？最后一个div是由jQuery（或Firefox）添加的，它不是我的基本代码的一部分。

是我代码的一部分，里面什么都没有。谢谢你的无API提示。我讨厌jQuery和他们粗略的例子！这就像是在这里，你很幸运，如果你能想出这个：P

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

<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>