为什么我的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元素不能调整大小？

回答

相关问题