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

回答

相關問題