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

我真的很感激在正确的方向点头.谢谢

Answer 1

在构建自定义下载时,必须包含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;}

Answer 2

调用jquery ui和css之后应该有这个权利:

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

编辑:此外,您需要包含一个主题才能正常工作.