jQuery UI 可调整大小根本不起作用
好吧,这就是问题所在。 jQuery 可调整大小在此页面上不起作用:单击此处
在灰色框中尝试一下在左上角。
我想做的就是使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 的库。
我真的很感激您在正确的方向上点头。 谢谢
Ok here is the problem. jQuery Resizable just does not work on this page: click here
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.
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:
<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.
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.
I would really appreciate a nod in the right direction.
Thank you
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
当您构建自定义下载时,您必须包含 jquery-ui 提供的 css。您可以在 jquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.css 中找到 css 文件(如果您选择了 lightness 主题)。这是可调整大小的 css:
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 之后应该会出现这样的情况:
编辑: 另外,您需要包含一个主题才能正常工作。
There is supposed to be this right after calling jquery ui and css:
EDIT: Also, you need to include a theme for it to work correctly.
尝试添加这个:
try adding this: