jQuery UI可调整大小根本不起作用

好的，这里是问题所在。 jQuery Resizable在此页面上不起作用：click here jQuery UI可调整大小根本不起作用

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

我想要做的是让正确的大小可调整大小的喊话器。但它不起作用，所以我试图从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>

文件准备函数内部脚本（如例子中）：

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

我：

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

灰色框的CSS由于我的网站的设计，必须添加位置和z-index参数，但似乎不会影响anythi NG。

与实现

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

我觉得我失去了一些东西真的很明显这里，但我无法看到它。我甚至试图将jQuery UI库链接到本地目录，而不是使用谷歌的。

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

来源

2010-02-11 Cletus

有应该调用jQuery UI的和CSS后成为这一权利：

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

编辑：此外，您还需要包括一个主题为它才能正常工作。

来源

2010-02-12 00:09:53 tr4656

哦对不起，我忘了提到它。它也在那里。我会更新我的帖子。 – Cletus 2010-02-12 00:12:15

我认为你需要一个主题才能正常工作。 – tr4656 2010-02-12 00:31:52

我同意tr4656。可调整大小的插件添加了调整大小的手柄。您需要包含css来提供句柄大小。 – czarchaic 2010-02-12 06:54:16

你必须包括由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;}

来源

2012-07-05 07:01:39

我**恨**，这是我的问题。非常感谢您的精彩提醒！ – 2016-03-01 14:57:47

尝试添加此：

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

来源

2013-05-17 12:16:20 Dedan

jQuery UI可调整大小根本不起作用

回答

相关问题