Изменяемый размер Jquery сдвигает мой элемент DOM - PullRequest
Новая
       29

Изменяемый размер Jquery сдвигает мой элемент DOM

5 голосов
/ 04 июня 2011

У меня есть следующий код 

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>

<style type="text/css">
  #main-content {
    width:300px;
    height:500px;
    background:#00F;
    overflow:auto;
  }
  #top-name , #top-ip {
    background:#000;
    color:#FFF;
    width:80%;
    position:relative;
    left:10%;
    margin-bottom:5px;
    margin-top:5px;
  }
 </style>

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">                </script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script>
$(function() {
    $("#top-ip").resizable({
        handles: 'n, s'
    });
    $("#extrainfo").hide();
    $("#top-name").mouseenter(function() {
        $("#extrainfo").fadeIn();
    });
    $("#top-name").mouseleave(function() {
        $("#extrainfo").fadeOut();
    });
    var stop = false;
    $( "#accordion h2" ).click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });
    $( "#accordion" )
        .accordion({
            header: "> div > h2"
        })
        .sortable({
            axis: "y",
            handle: "h2",
            stop: function() {
                stop = true;
            }
        });
});
$(function() {
    $( "#accordion" ).resizable({
        maxHeight: 100,
        resize: function() {
            $( "#accordion" ).accordion( "resize" );
        }
    });
});
</script>
    </head>

    <body>
    <div id="main-content">
    <div id="top-name">
    Name here
    <div id="extrainfo">
     blanl</div>
     </div>
     <div id="top-ip">
     Resizalbe element
     </div>
     <div id="accordion">
<div>
    <h2>Player List</h2>
    <div style="background:#F00">
    OMG OMG OMG OMG
    </div>
</div>
    <div>
    <h2>Configs</h2>
    <div>
    OMG OMG OMG OMG

    sdg<br />
    SDF
    sDsag
     sdzh
     z<br />
     zh<br />
     zh
    </div>
</div>
<div>
    <h2>Comming Soon</h2>
    <div>
    Comming Soon Zong
    OMG OMG OMG OMG
    </div>
</div>
<div>
    <h2>Server Disscussion</h2>
    <div>
    Server Disscussion
    Server Disscussion
    </div>
</div>
<div>
    <h2>comming Soon</h2>
    <div>
    comming Soon
    comming Soon
    </div>
</div>

     </div>
     </div>
    </body>
     </html>

Когда я изменяю размер элемента ip, он перемещает элемент немного влево, у?

Демо здесь Демо

1 Ответ

3 голосов
/ 04 июня 2011

Это процентное свойство, оставшееся в селекторе #top-name, #top-ip.Я был удивлен, обнаружив, что запрос на улучшение jQuery UI # 2421 существует уже 3 года!

Пока это не исправлено, если вы сделаете свойство left непроцентным значением (30px кажется правильным), изменение размера работает, как и ожидалось.

Редактировать: Я нашел обходной путь.Вы можете использовать функцию resize для установки значения left во время изменения размера.Если вы измените код на этот, изменение размера будет работать, как ожидается, и не изменит левую позицию элемента. 

$("#top-ip").resizable({
    handles: 'n, s',
    resize: function(event, ui) {
        $(this).css({left:'10%'});
    }
});
...