jQuery的可調整大小返回大小

Question

乾草我新jQuery和我試圖使用可調整大小。我可以讓它工作正常，但似乎無法解決如何返回新的尺寸。我想將新大小設置爲一個php變量以保存在數據庫中。我是新來的JavaScript和jQuery，所以任何幫助將是一個很大的幫助。

Answer 1

可調整大小的插件本身不提供獲取大小的方法。我假設他們沒有實現這個，因爲它只是在同一個節點上的冗餘方法，因爲jQuery核心已經有了這樣的方法。

jQuery提供了幾種方法來查找寬度和高度，具體取決於你想要做什麼。普通的寬度/高度方法獲取CSS值。很多時候，但是，可以使用outerWidth和outerHeight方法，更加有用，因爲它們返回的元素的總規模計算頁面上，包括所有的邊距，邊框等

例子：

//Width/Height of just the element (as from css) 
var w = $('.selector').width() 
var h = $('.selector').height() 

//Width/Height of total space the element takes up with formatting (includes border and margin) 
var w = $('.selector').outerWidth() 
var h = $('.selector').outerHeight() 

//Width/Height of the space the content of the element takes up 
var w = $('.selector').innerWidth() 
var h = $('.selector').innerHeight() 

編輯運用的方法來調整大小事件

可調整大小的插件提供了幾個事件綁定到：創建，啓動，調整和停止。我們可以綁定一個函數，以便在初始化時或之後的任何時間調用這些事件。聽起來，當你開始調整元素的大小時，start事件觸發，當你停止調整元素的大小時停止觸發，每次調整大小（每個像素）時元素的大小發生變化時調用resize。

綁定在初始化：

$('.selector').resizable({ 
    //Other options 
    create : function(event,ui) {...}, 
    start : function(event,ui) {...}, 
    stop : function(event,ui) {...}, 
    resize : function(event,ui) {...} 
}); 

或者在任何點結合現在後

$('.selector').bind('resizecreate',function(event,ui) {...}); 
$('.selector').bind('resizestart',function(event,ui) {...}); 
$('.selector').bind('resizestop',function(event,ui) {...}); 
$('.selector').bind('resize',function(event,ui) {...}); 

，對於你的情況，我建議1 2的選項，無論是結合了啓動和停止命令獲取原始尺寸和修改尺寸，或綁定到調整大小以實時處理值。

用於啓動實例/停止模式

var startW = 0; 
var startH = 0; 

$('.selector').resizable({ 
    //Other options 
    start : function(event,ui) { 
     startW = $(this).outerWidth(); 
     startH = $(this).outerHeight(); 
    }, 
    stop : function(event,ui) { 
     endW = $(this).outerWidth(); 
     endH = $(this).outerHeight(); 
     alert("width changed:"+ (endW-startW) + " -- Height changed:" + (endH-endW)); 
    } 
}); 

例在移動中打印值安慰

$('.selector').resizable({ 
    //other options 
    resize: function(event,ui) { 
     console.log([$(this).outerWidth(),$(this).outerHeight()]); 
    } 
}); 

希望這有助於

Answer 2

例如格：

<div id="div"> 
    <p>this is the div i want to retrieve demensions</p> 

    <p>second paragraph</p> 
</div> 

檢索維度與此javascript

var width = $("#div").css("width"), 
    height =$("#div").css("height"); 

alert (width + ", " + height); 

寫尺寸回數據庫將你需要發佈的值回爲一個form的任一部分或通過AJAX請求

Answer 3

事情可能在這些時間有所不同答案，但現在jQuery UI可以很容易地獲得關於你的事件和UI元素的信息。我強烈建議控制檯記錄ui變量，因爲它可以從中獲得很多信息。不過要回答你的問題好一點：

$('.selector').resizable({ 
    stop: function (evt, ui) { 
     console.log(ui.size); 
    } 
}); 

應該產生一個具有屬性高度和寬度的對象。這些都是新的高度，你可以調整大小項目

的寬度，如果你想計算的這些值的增量，你可以參考ui.originalSize和高度或寬度屬性有作爲。

希望這多一點簡潔的作品出來比其他的答案