当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .resize()用法及代码示例


用法 
.resize( handler ) => jQuery

说明：将事件处理程序绑定到 "resize" JavaScript 事件，或在元素上触发该事件。

  • 添加的版本：1.0.resize( handler )

    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.4.3.resize( [eventData ], handler )

    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.0.resize()

    • 此签名不接受任何参数。

此方法是第一和第二变体中.on('resize', handler) 和第三变体中.trigger( "resize" ) 的快捷方式。

当浏览器窗口的大小改变时，resize 事件被发送到 window 元素：

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

现在，无论何时更改浏览器窗口的大小，消息都会附加到 <div id="log"> 一次或多次，具体取决于浏览器。

resize 处理程序中的代码不应依赖于调用处理程序的次数。根据实现，resize 事件可以在调整大小进行时连续发送(Internet Explorer 和基于 WebKit 的浏览器，如 Safari 和 Chrome 中的典型行为)，或仅在调整大小操作结束时发送一次(典型的其他浏览器(例如 Opera)中的行为)。

其他注意事项：

  • 由于 .resize() 方法只是 .on( "resize", handler ) 的简写，因此可以使用 .off( "resize" ) 进行分离。

例子：

要在调整大小时(或之后)查看窗口宽度，请尝试：

$( window ).resize(function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .resize()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。