Jquery UI - 可调整大小：也调整大小不准确？

发布于 2024-12-07 13:48:14 字数 1000 浏览 2 评论 0原文

好吧，我没有使用“alsoResize”，但我已经测试过，它的行为是相同的。

当您调整主元素的大小时，底部元素“选取框”的黑色边框通常会与顶部元素的白色虚线边框偏离。

$(".layer").resizable({
    //alsoResize: '.marquee',
    resize: function(event, ui) {
        $('.marquee').css({
            width : ui.size.width + "px",
            height : ui.size.height + "px",
            left : ui.position.left + "px",
            top : ui.position.top + "px",
        });
    },
    handles: 'all',
    aspectRatio: true,
});

http://jsfiddle.net/digitaloutback/uGr3w/3/

在本地演示中使用 firebug ，到了出线的阶段，可以看到行内元素的left、top和width、height的样式是不同的。

我想知道解决方法是否是将位置和大小统计数据发送到函数，该函数向两个元素输出精确的测量值？还有更简单的选择吗？谢谢

更新：

我有一个可以干净地工作的解决方法..它将可调整大小的计算尺寸传递给一个函数，该函数也将顶层设置为这些尺寸。

我确信有一种更有效的方法可以做到这一点，请随时提供优化版本..

http: //jsfiddle.net/digitaloutback/VDfpY/5/

原文

Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.

When you resize the main element, the black border from the bottom element 'marquee' often nudges out of line with the dashed white border from the top element.

$(".layer").resizable({
    //alsoResize: '.marquee',
    resize: function(event, ui) {
        $('.marquee').css({
            width : ui.size.width + "px",
            height : ui.size.height + "px",
            left : ui.position.left + "px",
            top : ui.position.top + "px",
        });
    },
    handles: 'all',
    aspectRatio: true,
});

http://jsfiddle.net/digitaloutback/uGr3w/3/

Using firebug on a local demo, at the stage they go out of line, you can see the inline element styles for left, top and width, height are different.

I wonder if a work around would be to send the position and size stats to function which outputs an exact measurement to both elements? Any simpler options? Thanks

UPDATE:

I've got a workaround which works cleanly.. it is to pass the resizable-calculated dimensions to a function which sets the top layer to these dimensions also.

I'm sure there's a more efficient method to do this, feel free to offer an optimised version..

http://jsfiddle.net/digitaloutback/VDfpY/5/

分享到QQ

分享到微博

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

发布评论

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

初雪 2024-12-14 13:48:14

ui 参数向调整大小事件报告的大小和位置与实际大小和位置似乎存在差异。这可能是由于构建 ui 参数和触发事件之间存在延迟造成的。

我尝试使用事件运行时报告的实际位置和大小：

        $('.marquee').css({
            'left' : $(this).position().left,
            'top' : $(this).position().top,
            'width' : $(this).width(),
            'height' : $(this).height()
        });

这似乎与实际尺寸更匹配。
http://jsfiddle.net/VDfpY/1/

There seems to be a discrepancy in the size and position reported by the ui parameter to the resize event, and the actual sizes and positions. This is possibly due to a delay between the ui parameter being built and the event being fired.

I experimented using the actual position and size reported at the time of the event running:

        $('.marquee').css({
            'left' : $(this).position().left,
            'top' : $(this).position().top,
            'width' : $(this).width(),
            'height' : $(this).height()
        });

This seems to match much more precicely the actual dimensions.
http://jsfiddle.net/VDfpY/1/

回复收藏 0 原文

野の 2024-12-14 13:48:14

这个怎么样？
让 CSS 处理大小而不是 JS
http://jsfiddle.net/HerrSerker/uGr3w/5/

--编辑添加的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".layer").resizable({
        handles: 'all',
        aspectRatio: true,
    });

});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
    background: #999}

.marquee {
    border: 1px dashed #fff;
    position: absolute;
    left: -1px; top: -1px;
    width: 100%; height: 100%;
    display: block;
    z-index: 2500;    
}

.layer {
    border: 1px solid black;
    position: absolute;
    left: 150px; top: 150px;
    width: 250px; height: 226px;
    display: block;
    z-index: 2501;
}

</link>
<body>
<div id="canvas">
    <a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

How about this?
Let the CSS handle the sizes and not the JS
http://jsfiddle.net/HerrSerker/uGr3w/5/

--edit added code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $(".layer").resizable({
        handles: 'all',
        aspectRatio: true,
    });

});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
    background: #999}

.marquee {
    border: 1px dashed #fff;
    position: absolute;
    left: -1px; top: -1px;
    width: 100%; height: 100%;
    display: block;
    z-index: 2500;    
}

.layer {
    border: 1px solid black;
    position: absolute;
    left: 150px; top: 150px;
    width: 250px; height: 226px;
    display: block;
    z-index: 2501;
}

</link>
<body>
<div id="canvas">
    <a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

回复收藏 0 原文

~没有更多了~