jQuery UI可调整大小不起作用

Question

这里有一个问题。jQuery Resizable 在这个页面上不起作用：点击这里

在左上角的灰色框中试一下。

我想要做的是调整右侧的 shoutbox 大小，使其可调整大小。但是它没有起作用，所以我尝试从 jQuery UI 示例页面复制所有内容并将其添加到我的页面中进行测试。因此我使用了相同的 CSS 添加了灰色框，但它不起作用。

以下是库的调用方式：

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

 $('#resizable').resizable();

灰色方框的CSS：

<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>

因为我网站的设计需要，我不得不添加位置和z-index参数，但这似乎并没有影响任何内容。

实现代码如下：

  <div id="resizable"></div>

我觉得我可能错过了一些非常明显的东西，但我看不到它。 我甚至试着将jquery UI库链接到本地目录，而不是使用google的库。

我会非常感激指点正确的方向。 谢谢

- Cletus

Answer 1

当您构建自定义下载时，必须包含jquery-ui提供的css。您可以在jquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.css（如果您选择了lightness主题）中找到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;}

- Tomasz Sikora

---

我讨厌这是我的问题。非常感谢你提醒我！ - Alex Williams

Answer 2

在调用jQuery UI和CSS之后，应该出现这个：

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

编辑： 另外，您需要包含一个主题才能正确使用它。

- tr4656

---

哦，对不起，我忘了提到它。 它也在里面。 我会更新我的帖子。 - Cletus

我同意tr4656的观点。可调整大小插件添加了可调整大小的手柄，但您需要包含CSS以提供手柄的大小。 - czarchaic

@Cletus，你能否发布完整的解决方案吗？ - Andrew B.

我成功地使 resize() 在无主题的情况下工作。但是你还需要调用 draggable()... - Ben Racicot

Answer 3

try adding this:

<div id="resizable" class="ui-widget-content">

- Dedan