无法让 jQuery 调整大小工作：我做错了什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/694059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot get jQuery resizable to work: What am I doing wrong?
提问by MECU
Here is my simple code to try and test if jQuery resizable is working. I use other jQuery components just fine using the google.load, and I've tried swapping out the google.load for a local version with no difference. I've tested in 3 browsers, I've copied code from several demo/tutorial sites (where it works find on their site).
这是我的简单代码，用于尝试测试 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>
I don't get any error messages. I'm at my wit's end. What am I doing wrong? Why doesn't even this simple case work?
我没有收到任何错误消息。我已经无计可施了。我究竟做错了什么？为什么这个简单的案例不起作用？
UPDATE: the jQuery UI libraries are included by the line google.load("jqueryui", "1.7.1");
更新：jQuery UI 库包含在 google.load("jqueryui", "1.7.1"); 行中。
回答by CMS
jQuery UI is working fine in your sample, the issue you have is because you don't have any CSS Theme included in your last test, and the "resizable handle" icon is not shown.
jQuery UI 在您的示例中运行良好，您遇到的问题是因为上次测试中没有包含任何 CSS 主题，并且未显示“可调整大小的手柄”图标。
Add your own themeor the default one:
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
See your sample here.
在此处查看您的示例。
回答by Mateusz
All CSS you need to get working jquery ui .resizable(): (don't forget to save image to local)
使 jquery ui .resizable() 工作所需的所有 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>
回答by cletus
Have you tried:
你有没有尝试过：
<script type="text/javascript">
google.setOnLoadCallback(function() {
$(function() {
$("#resizable").resizable();
});
});
</script>
It's worth noting that google.load() is an async call and you won't be able to call the jQuery functions until they're loaded hence the callback.
值得注意的是 google.load() 是一个异步调用，您将无法调用 jQuery 函数，直到它们被加载，因此回调。
Ok, had a look at your example and you've got a few problems:
好的，看看你的例子，你有一些问题：
- This is the biggest: you have no jQuery UI stylesheet;
- You're double including jQuery, jQuery UI and SWFObject from both Google and locally;
- The last div inside your resizable div is blocking resizing. Not sure exactly why but I commented it out and it works fine; and
- You don't need an API key for Google's AJAX Libraries API. This odesn't cause a problem. It's just FYI.
- 这是最大的：你没有 jQuery UI 样式表；
- 包括来自 Google 和本地的 jQuery、jQuery UI 和 SWFObject；
- 可调整大小的 div 中的最后一个 div 阻止调整大小。不知道到底是为什么，但我把它注释掉了，它工作正常；和
- 您不需要 Google 的 AJAX 库 API 的 API 密钥。这不会造成问题。仅供参考。
Working version of yours:
你的工作版本：
<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>
