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

好吧，我没有使用'alsoResize'，但我测试过了，它的行为相同。Jquery的UI - 可调整大小：也resize不准确？

当您调整主要元素的大小时，底部元素'marquee'的黑色边框通常会与顶部元素中的虚线白色边框偏离。

$(".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，在他们出去行的阶段，你可以看到左侧，顶部和宽度，高度内联元素的风格是不同的。

我想知道是否会将位置和大小统计信息发送给两个元素都输出精确测量的函数？任何更简单的选项？由于

UPDATE：

我有哪些工作干净..它是可调整大小的计算维度传递给它设置顶层这些尺寸也是一个功能的解决方法。

我敢肯定有一个更有效的方法来做到这一点，随意提供一个优化版本..

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

来源

2011-09-30 digout

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

--edit添加代码

的抬起头对更直接的方式

<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>

来源

2011-10-08 19:08:24 HerrSerker

是的，非常好。谢谢。 – digout

-1将您的解决方案也发布在答案中！如果jsfiddle关闭，将无法显示您的正确答案！ – JellyBelly

@JellyBelly做了你想要的。为什么downvote？ – HerrSerker

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

我尝试使用实际的位置和大小的情况下行驶时的报道：

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

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

来源

2011-09-30 16:36:54 Gus

谢谢 - 我已经与行之有效的解决方案作出回应，虽然可能不是最高效的.. – digout

这让我疯狂; UI对象一直给我错误的尺寸宽度/高度值，总是1px太高或太低！你的解决方案似乎每次都准确地工作（尽管由于某种原因，我只需要使用宽度/高度，而不是位置）。非常感谢，为此+1了。 – Alec

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

回答

相关问题