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

发布于 2024-08-20 18:53:18 字数 1519 浏览 6 评论 0原文

好吧,这就是问题所在。 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

浸婚纱 2024-08-27 18:53:18

当您构建自定义下载时,您必须包含 jquery-ui 提供的 css。您可以在 jquery-ui-1.8.21.custom\css\ui-lightness\jquery-ui-1.8.21.custom.css 中找到 css 文件(如果您选择了 lightness 主题)。这是可调整大小的 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;}

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:

.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;}
放低过去 2024-08-27 18:53:18

在调用 jquery ui 和 css 之后应该会出现这样的情况:

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

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

There is supposed to be this right after calling jquery ui and css:

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

EDIT: Also, you need to include a theme for it to work correctly.

绝不服输 2024-08-27 18:53:18

尝试添加这个:

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

try adding this:

<div id="resizable" class="ui-widget-content">
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文