jQuery UI Resizable 是一个流行的拖放库，它使您能够轻松地调整元素的大小。然而，当您使用此库时，您可能会遇到一些问题：如何在可调整大小的元素大小改变时触发窗口大小调整事件？本文将详细介绍如何做到这一点。
明确需求
在解决问题之前，需要明确我们的需求。我们想要在大小可调整的元素改变大小时触发 window 对象的 resize 事件。这个需求看上去很简单，但实际上却不是那么容易实现。
解决方案
为了实现这个目标，我们需要结合使用 jQuery UI Resizable 和 jQuery 的 resize 事件。具体来说，我们需要监听相应的 resize 事件，然后手动触发 window resize 事件。
首先，让我们看一下如何使用 jQuery UI Resizable。以下代码演示了如何使用 resizable() 函数：
-- --------------------- --------------
然后，我们需要侦听初始化后的 resize 事件并触发 window 对象上的 resize 事件，使其与页面的其他部分保持同步。以下是所需的代码：
-- --------------------- -------------
------- --------- ------ -- - -
-- ------ ---------- -------- --
-
---以上代码会在可调整大小的元素大小改变时手动触发 window 对象的 resize 事件。因此，我们的需求得到了满足。
示例代码
以下是一个完整的示例，演示如何使用 jQuery UI Resizable 触发窗口大小调整事件：
--------- -----
------
------
------------- -- -----------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------
------- ------------------------------------------------------------
-------
------------------- -
------ ------
------- ------
------- --- ----- ------
-
--------
-------
------
---- ------------------------------
--------
-- --------------------- -------------
------- --------- ------ -- - -
-- ------ ---------- -------- --
-
---
-- ------ ----- --------- ---------- -
------------ ------- --------- --
---
---------
-------
-------当您拖动 #myResizableElement 元素时，将打印 "Window resized!" 到控制台中。
总结
本文中，我们学习了如何使用 jQuery UI Resizable 触发窗口大小调整事件。我们通过监听相应的 resize 事件并手动触发 window resize 事件来实现这一目标。这个技巧可以帮助您更好地管理可调整大小的元素，并与页面的其他部分保持同步。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31085