jQuery UI 可调整大小根本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2248689/
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
jQuery UI resizable not working at all
提问by Cletus
Ok here is the problem. jQuery Resizable just does not work on this page: click here
好的，这是问题所在。jQuery Resizable 在此页面上不起作用：单击此处
Try it out on the grey box in the upper left corner.
在左上角的灰色框中尝试一下。
What I want to do is make the shoutbox on the right size resizable. But it didn't work so I tried to just copy everything from the jQuery UI example page into my one and try it out. So I added the grey box the same way they did, using even the same css but it won't work.
我想要做的是使呼喊框大小合适。但它不起作用，所以我尝试将 jQuery UI 示例页面中的所有内容复制到我的页面中并尝试一下。所以我以与他们相同的方式添加了灰色框，甚至使用相同的 css 但它不起作用。
Here's how the libraries are called:
以下是库的调用方式：
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function() {
});
</script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type='text/javascript' src='js/jqueryEasingMin.js'></script>
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script>
<script type="text/javascript" src="js/shoutbox.js" ></script>
<script type="text/javascript" src="js/bbcode.js" ></script>
<script type='text/javascript' src='js/jqueryLoader2.js'></script>
script inside document ready function (like in example):
文档就绪函数中的脚本（如示例中所示）：
$('#resizable').resizable();
CSS of the grey box:
灰框的CSS：
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>
I had to add the position and z-index parameters because of the design of my site but that seems not to affect anything.
由于我网站的设计，我不得不添加位置和 z-index 参数，但这似乎没有任何影响。
And implementation:
和实施：
<div id="resizable"></div>
I think I'm missing something really obvious here but I can't see it. I even tried it with linking the jquery UI libraries to a local directory instead of using google's ones.
我想我在这里遗漏了一些非常明显的东西，但我看不到它。我什至尝试将 jquery UI 库链接到本地目录，而不是使用 google 的库。
I would really appreciate a nod in the right direction. Thank you
我真的很感激向正确的方向点头。谢谢
采纳答案by tr4656
There is supposed to be this right after calling jquery ui and css:
调用 jquery ui 和 css 后应该是这样的：
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
EDIT:Also, you need to include a theme for it to work correctly.
编辑：此外，您需要包含一个主题才能正常工作。
回答by Tomasz Sikora
You have to include css provided by jquery-ui when you build your custom download. You can find the css file in jquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.css (if you chosen lightness theme). Here's the css for resizable:
在构建自定义下载时，您必须包含 jquery-ui 提供的 css。您可以在 jquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.css 中找到 css 文件（如果您选择了亮度主题）。这是可调整大小的css：
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; 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: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; 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;}
回答by Dedan
try adding this:
尝试添加这个：
<div id="resizable" class="ui-widget-content">
