JQuery UI - изменяемый размер: также изменение не точно? - PullRequest
Новая
       15

JQuery UI - изменяемый размер: также изменение не точно?

2 голосов
/ 30 сентября 2011

Хорошо, я не использую «tooResize», но я протестировал, и он ведет себя так же.

Когда вы изменяете размер основного элемента, черная граница от нижнего элемента '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 в локальной демоверсии, на этапе, когда они выходят из линии, вы можете увидетьстили встроенных элементов для left, top и width, height различны.

Интересно, можно ли обойти эту проблему, чтобы посылать статистику положения и размера в функцию, которая выводит точное измерение для обоих элементов?Есть более простые варианты?Спасибо

ОБНОВЛЕНИЕ:

У меня есть обходной путь, который работает чисто ... это передать вычисленные по размеру размеры функции, которая устанавливает верхний слой вэти размеры также.

Я уверен, что есть более эффективный способ сделать это, не стесняйтесь предложить оптимизированную версию ..

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

Ответы [ 2 ]

5 голосов
/ 30 сентября 2011

Кажется, есть несоответствие в размере и положении, сообщаемом параметром ui событию изменения размера, и фактических размерах и позициях. Возможно, это связано с задержкой между строимым параметром пользовательского интерфейса и инициируемым событием.

Я экспериментировал, используя фактическую позицию и размер, указанные во время запуска события: 

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

Это, кажется, намного точнее соответствует фактическим размерам. http://jsfiddle.net/VDfpY/1/

3 голосов
/ 08 октября 2011

Как насчет этого? Пусть 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>
...