jquery 可调整大小的游标不与 margin auto 保持一致

发布于 2024-08-11 07:52:08 字数 485 浏览 3 评论 0原文

我对 jquery 可调整大小插件有疑问。我已经解决了这个问题并提出了这个。如果我创建一个 div 并使其可调整大小并使其也具有一个 isResize ，那么它在大多数情况下都可以正常工作。但是，如果我将第二个 div （也Resize）设置为 margin:0 auto ，它就无法正常工作。鼠标光标离开您调整大小的部分。所以这里是我正在谈论的一个例子：

<div id="container">
  <div id="inside" style="margin:0 auto;">
  </div>
</div>

jquery：

$("#container").resizable({ alsoResize:"#inside" });

如果我在边距中取出 auto ，它工作得很好，但在那里它就不起作用了。有没有办法让这个工作或只是另一种方法来居中页面而不使用自动？

原文

I have a problem with the jquery resizable plugin. I have troubleshot the issue and have come up with this. If I create a div and make it resizable and make it also have an alsoResize it works fine for the most part. However, If I set the second div that is alsoResize to margin:0 auto it does not work properly. The mouse cursor is coming off the part where you resize it. So here is an example of what i am talking about:

<div id="container">
  <div id="inside" style="margin:0 auto;">
  </div>
</div>

The jquery:

$("#container").resizable({ alsoResize:"#inside" });

If I take out the auto in the margin it works fine but with it in there it isnt working. Is there a way to make this work or just another way to center the page without using auto?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

上课铃就是安魂曲 2024-08-18 07:52:08

我获取了可调整大小插件的演示之一的代码，并对其进行了调整以完成我认为您想要完成的任务。如果不是这样，请提供您所拥有内容的链接，或粘贴到整个页面：

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Resizable - Default functionality</title>
    <link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/ui.resizable.js"></script>

    <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" />
    <style type="text/css">
        #container { width: 150px; height: 150px; }
        #container #inside { height:100px; width:100px; margin:0 auto; background:#eee; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#container").resizable({ alsoResize:"#inside" });
    });
    </script>
</head>

<body>
    <div class="demo">
        <div id="container" class="ui-widget-content">
            <div id="inside"></div>
        </div>
    </div>
</body>

仅供参考 - 我刚刚在 Mac 上的 Firefox 和 Safari 中测试了这一点。

I grabbed the code of one of the demos for the Resizeable plugin and tweaked it to do what I think you're trying to accomplish. If this isn't it, please provide a link to what you have, or paste in the entire page:

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Resizable - Default functionality</title>
    <link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/ui.resizable.js"></script>

    <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" />
    <style type="text/css">
        #container { width: 150px; height: 150px; }
        #container #inside { height:100px; width:100px; margin:0 auto; background:#eee; }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#container").resizable({ alsoResize:"#inside" });
    });
    </script>
</head>

<body>
    <div class="demo">
        <div id="container" class="ui-widget-content">
            <div id="inside"></div>
        </div>
    </div>
</body>

FYI - I just tested this in Firefox and Safari on a Mac.

回复收藏 0 原文

~没有更多了~