jQuery-UI可調整大小：按比例調整所有也可調整大小的元素

我有一個可調整大小的div，它位於已設置爲alsoResize的元素選區上。jQuery-UI可調整大小：按比例調整所有也可調整大小的元素

可見，可調整大小的元素是alsoResize元素的邊界框。

我希望能夠調整可調整大小div的比例的alsoResize元素。 UI的默認行爲，使每一個元素都有固定的左側和頂部位置調整時：

http://jsfiddle.net/digitaloutback/SrPhA/2/

但我想調整每個AR元素的左側和頂部，它的大小與邊框規模。

我首先想到通過改變alsoResize插件不會太麻煩。這是我加入到調整大小：_alsoResize：

// Get the multipliers 
var scaleX = self.size.width/os.width; 
var scaleY = self.size.height/os.height; 

newElW = (parseInt(el.css('width')) * scaleX); 
newElH = (parseInt(el.css('height')) * scaleY); 
newElL = (parseInt(el.css('left')) * scaleX); 
newElT = (parseInt(el.css('top')) * scaleY); 

el.css({ width: newElW, height: newElH, left: newElL, top: newElT });

正如你看到的，盒子有點滯後：

http://jsfiddle.net/digitaloutback/SrPhA/4/

東西似乎是膨脹的數字，並不能很弄明白，任何建議表示讚賞。瀏覽器腳本&之間的小數位可能有差異？

來源

2011-11-07 digout

也許你需要重新考慮結構..

你可以插入.resizer元素中的元素.lyr，並將它們與個位..這種方式，而他們的容器大小的改變，他們會自動調整位置裏面。（的插件沒有處理它們）

演示在後http://jsfiddle.net/SrPhA/65/

更新評論

去耦合的resizer從alsoResize元素，你在計算時需要考慮幾件事情。

首先，你需要使用的起始尺寸/位置，而不是當前的元素，所以在使用start.width.height等。
您需要的元素轉化爲原點的定位（從resizer關於距離）縮放左/頂部，然後再轉換回原來的位置..

最終計算變得

newElW = start.width * scaleX; 
newElH = start.height * scaleY; 
newElL = ((start.left - op.left) * scaleX) + op.left; 
newElT = ((start.top - op.top) * scaleY) + op.top ;

它需要一些更多的修補來處理這種情況，你通過拖動調整器的頂部或左側來縮放元素。

演示在http://jsfiddle.net/gaby/SrPhA/171/

最新

處理比例在所有方向上使用這些傭工..

utils: { 
     west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left}, 
     east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;}, 
     south: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top; }, 
     north: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top + delta.top; } 
    }

工作示例與所有更新的http://jsfiddle.net/gaby/SrPhA/324/

來源

2011-11-10 10:59:58

我沒有考慮這個選項，雖然還沒有出了問題，這將意味着失去大量的地面。另外，我會從劇本中提出更多問題。 'marquee'需要實時包裹任意數量的對象，這樣就可以進行大量的包裝和解包，而這些包裝目前還不存在。儘管如此，仍然會測試，謝謝輸入。 – digout

@會，更新回答.. –

這是Gaby的一大改進。然而，尺寸仍然在某處膨脹 - 嘗試拖拉跑馬圈幾次，跑馬燈開始離開內部元素。當像素四捨五入時，這可能是一個差異，你認爲？ – digout

您的意思是使用+而不是*？

newElW = (parseInt(el.css('width')) + scaleX); 
newElH = (parseInt(el.css('height')) + scaleY); 
newElL = (parseInt(el.css('left')) + scaleX); 
newElT = (parseInt(el.css('top')) + scaleY);

來源

2011-11-10 11:02:14

否 - 它們是乘數，有效地增加一個百分比。 – digout

我通過設置上邊距和利潤率左定位和離開「頂」和「左」的屬性，在默認的動畫有一點點運氣。

http://jsfiddle.net/SrPhA/97/

來源

2011-11-10 12:26:21 orolo

因爲「內在」元素仍然是固定的，所以我不太瞭解。 – digout

jQuery-UI可調整大小：按比例調整所有也可調整大小的元素

回答

相關問題