爲什麼我的Jquery元素不能調整大小？

我正在使用CSS的resize屬性來調整FF，Safari和Chrome中的div元素，但由於此屬性在IE和Opera中不起作用，因此我不得不在這兩種瀏覽器中的一種情況下找到備份正在使用，所以我使用Jquery和JavaScript的組合，詢問我在網上找到的功能，在這裏：Browser resize support code 。不幸的是，這是我擔心的代碼在我的測試中不起作用，看看它是否可行。爲什麼我的Jquery元素不能調整大小？

這是我的測試代碼：My code

var unsupported = (function() 
{ 
    var div = document.createElement('div'), 
    vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
    len = vendors.length; 
    return function(prop) 
    { 
     if(prop in div.style) return true; 
     prop = prop.replace(/^[a-z]/, function(val) 
     { 
      return val.toUpperCase(); 
     }); 
     while(len--) 
     { 
      if (vendors[len] + prop in div.style) 
      { 
       return false; 
      } 
     } 
     return true; 
    }; 
})(); 
if(unsupported('resize')) 
{ 
    $("#elementtoresize").append('<img class="resizer" src="resizer.png"/>'); 
    var r = true; 
} 
$(".resizer").mousedown(function(e){ 
    if(r) 
    { 
     var Xoffset = this.parentNode.offsetLeft + this.parentNode.offsetWidth - e.clientX; 
     var Yoffset = this.parentNode.offsetTop + this.parentNode.offsetHeight - e.clientY; 
     r = false; 
    } 
    $(".resizer").mousemove(function(e){ 
     this.parentNode.offsetWidth = e.clientX + Xoffset - this.parentNode.offsetLeft; 
     this.parentNode.offsetHeight = e.clientY + Yoffset - this.parentNode.offsetTop; 
    } 
    $(".resizer").mouseup(function(){ 
     r = true; 
    } 
}

另外，它還要求在同一文件夾中腳本的圖像時，優選10×10或更小，以被用作圖標用於調整div元素，但不特調整大小不起作用，圖像甚至沒有顯示，這是什麼導致我相信檢查CSS的變量是什麼導致了問題，因爲沒有它，圖像不會附加在div元素內。但是由於我沒有編寫代碼，並且沒有其他代碼可以找到用於檢查特定CSS屬性是否受支持的代碼，所以我無法真正找到該錯誤。如果您要嘗試測試代碼，那麼您還需要在樣式標記中添加一些代碼。

.resize 
{ 
z-index:2; 
position:absolute; 
right:5; 
bottom:5; 
}

任何幫助修復代碼，將不勝感激！

來源

2011-10-04 Ethan722

爲什麼不使用名爲「resizble」的jQuery插件？ http://jqueryui.com/demos/resizable/ –

我寧願不使用外部庫爲我正在工作的網站。 – Ethan722

對於那些認爲你可以提供幫助的人，我仍然需要幫助。 – Ethan722

該代碼在很多方面都是錯誤的，包括語法和方法。

首先，您應該使用像Modernizr這樣的庫來測試功能支持。無論如何，如果你要使用這個代碼，儘量不要只改變它的一部分。函數unsupported失敗，因爲您沒有更改它的所有返回點。將來，如果您確實需要使用新命名，請將原始功能封裝起來。像unsupported = function (x) { return !supported(x); };

此外，您使用的原始功能不完整。雖然它不影響你的具體情況，但我冒昧地改進它。在這裏找到它：http://jsfiddle.net/mihaibirsan/NCs5J/

其次，調整大小的代碼真的很混亂。當您將函數作爲參數傳遞時，不要忘記關閉函數調用的括號！而且，使用全局變量絕對是不好的 - 不惜一切代價避免！此外，由於您使用jQuery，爲什麼不將功能包裝在一個漂亮的小jQuery函數中？你可以在這裏找到代碼：http://jsfiddle.net/mihaibirsan/Rty3R/8/

所以，你的代碼應該回落到之前（沒有測試代碼）粘貼的點點滴滴，再加上以下行：

if (!supported('resize')) $("#elementtoresize").resizable();

我希望這有助於！如果它令你滿意，請接受答案！我這樣做的要點！

來源

2011-10-26 15:11:08

嗯，我總是很樂意幫助一個低分的StackOverflow用戶，並且我可以看到你在這段代碼上工作得很辛苦，所以我很樂意接受你的回答:) – Ethan722

爲什麼我的Jquery元素不能調整大小？

回答

相關問題