jQuery调整大小功能只能在窗口上工作？

问题描述：

我想知道jQuery .resize()函数是否只适用于（a）窗口？我不能使用此功能来检测某个元素是否调整大小？jQuery调整大小功能只能在窗口上工作？

例如，以下JSFiddle现在没有工作吗？但是有可能真正实现它的工作吗？

$(document).ready(function() { 
 
    /* Does not work for me: */ 
 
    $(".foo").resize(function() { 
 
    alert("yes!"); 
 
    }); 
 

 
    /* Does work for me: */ 
 
    $(window).resize(function() { 
 
    alert("yes!"); 
 
    }); 
 
});

.foo { 
 
    border: 2px solid; 
 
    padding: 20px; 
 
    width: 100px; 
 
    ; 
 
    resize: both; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p><b>Note:</b> Internet Explorer does not support the resize property.</p> 
 

 
<div class="foo"> 
 
    Drag the corner(s) around. 
 
</div>

你只需要自己建立一些东西。你抱怨不存在的功能，然后抗议使用jQuery UI，因为你只需要调整大小功能？建立一些东西来监控它自己然后，它不难 – QBM5

@ QBM5这不是我的观点。我的观点是，我正在寻找一个答案，可以使用jQuery来检测调整大小的元素，这就是它的全部。我知道这个元素可以调整大小，因为它默认包含'height：auto;'，并且当它中的内容改变时，高度会改变。如果你使用图片作为内容，你可能会知道我在说什么。 – Barrosy

没有使用jquery（base）或纯javascript的事件，当元素更改大小时将触发事件，resize事件仅适用于窗口 – QBM5

答

是其能够利用这个插件JqueryUI Resizable，代码将是简单的

$(".foo").resizable();

示例演示以下

$(document).ready(function() { 
 
\t $("#resize-me").resizable(); 
 
});

#resize-me 
 
{ 
 
    height: 150px; 
 
    width: 150px; 
 
    border:2px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<div id="resize-me"> 
 
Resize me 
 
</div>

但是它需要包含JqueryUI，否则此解决方案将无法工作？用普通的jQuery，CSS和HTML是不可能的？它看起来像添加这个可调整大小的功能会添加自己的样式元素或仅仅是例子？ – Barrosy

@Barrosy是的，这将需要你添加这个plguin，否则如果你不想使用插件，那么你最终会写出他们写的相同的代码，可能重新发明轮子。风格是由其CSS文件添加..只需通过使用js文件，你会没事的... –

而我将如何确定它的元素调整大小呢？ – Barrosy

答

你是正确的，它只能与窗口。如果窗口大小发生变化（或者如果您在某些手机上滚动过多），浏览器将触发resize事件。你将不得不创建一些能够监控单个元素的大小并激发自定义事件的东西。

Trigger page在他们的API中有一些关于触发定制事件的信息。

jQuery调整大小功能只能在窗口上工作？

相关推荐