jQuery的可调整大小的变化我的DOM元素

我有以下代码jQuery的可调整大小的变化我的DOM元素

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

当我RESIZABLE它移动了一下左边的Y元素中的IP元素？这里Demo

来源

2011-06-04 kritya

你的小提琴选择了jQuery 1.4.2，而不是1.5，BTW。 – 2011-06-04 13:56:18

这有什么关系？我不认为它确实如此。当我上传演示它仍然没有工作有1.5：D – kritya 2011-06-04 14:04:19

演示它的在#top-name, #top-ip选择left属性的百分比。我很惊讶地发现jQuery UI #2421增强请求已经存在了3年！

在修复之前，如果您将left属性设置为非百分比值（30px看起来正好），则调整大小将按预期工作。

编辑：我找到了解决方法。您可以使用resize函数在调整大小期间继续设置left值。如果将代码更改为此，则调整大小按预期工作，不会更改元素的左侧位置。

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

来源

2011-06-04 14:44:42 andyb

但是，如果这需要是一个液体模板，即使用百分比？然后jQuery的可调整大小将无法正常工作？ :( – kritya 2011-06-04 15:31:46

没有这种增强功能被修复，没有本地支持。但是，我已经为您创建了一个解决方法:-)请参阅我的更新答案。 – andyb 2011-06-04 15:51:27

我希望工程：D。我现在无法测试它:(谢谢:) – kritya 2011-06-04 16:32:38

jQuery的可调整大小的变化我的DOM元素

回答

相关问题