當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。