JqueryUI - 可調整大小

上一頁
下一頁

jQueryUI 提供了 resizable() 方法來調整任何 DOM 元素的大小。此方法簡化了元素的大小調整，否則在 HTML 中需要花費時間和大量編碼才能完成。resizable() 方法在專案的右下角顯示一個圖示以調整大小。

語法

resizable() 方法可以以兩種形式使用 -

$ (selector, context).resizable (options) 方法

resizable (options) 方法宣告 HTML 元素可以調整大小。options 引數是一個物件，用於指定調整大小過程中相關元素的行為。

語法

$(selector, context).resizable (options);

您可以在使用 Javascript 物件時一次提供一個或多個選項。如果要提供的選項超過一個，則使用逗號分隔它們，如下所示 -

$(selector, context).resizable({option1: value1, option2: value2..... });

下表列出了可與此方法一起使用的不同選項 -

序號 選項及描述
1 alsoResize

此選項的型別為Selector、jQuery 或任何 DOM Element。它表示在調整原始物件大小時也調整大小的元素。預設值為false。

選項 - alsoResize

此選項可以是Selector、jQuery 或任何 DOM Element 型別。它表示在調整原始物件大小時也調整大小的元素。預設值為false。

它可以是以下型別 -

  • Selector - 此型別指示要從 DOM 文件中選擇的用於調整大小的 DOM 元素。

  • jQuery - 頁面上每個可調整大小的元素都會呼叫一個回撥函式。如果元素已調整大小，則此函式應返回true。

  • Element - 文件物件模型 (DOM) 中的一個元素。

語法

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 animate

當設定為true時，此選項用於在釋放滑鼠按鈕時調整大小期間啟用視覺效果。預設值為false（無效果）。

選項 - animate

當設定為true時，此選項用於在釋放滑鼠按鈕時調整大小期間啟用視覺效果。預設值為false（無效果）。

語法

$( ".selector" ).resizable({ animate: true });
3 animateDuration

此選項用於設定調整大小效果的持續時間（以毫秒為單位）。僅當animate 選項為true時才使用此選項。預設值為"slow"。

選項 - animateDuration

此選項用於設定調整大小效果的持續時間（以毫秒為單位）。僅當animate 選項為true時才使用此選項。預設值為"slow"。

它可以是以下型別 -

  • Number - 指定持續時間（以毫秒為單位）

  • String - 指定命名持續時間，例如“slow”或“fast”。

語法

$( ".selector" ).resizable({ animateDuration: "fast" });
4 animateEasing

此選項用於指定在使用animate 選項時應用哪個easing。預設值為"swing"。

選項 - animateEasing

此選項用於指定在使用animate 選項時應用哪個easing。預設值為"swing"。

緩動函式指定動畫在動畫的不同點處的進度速度。

語法

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 aspectRatio

此選項用於指示是否保持專案的縱橫比（高度和寬度）。預設值為false。

選項 - aspectRatio

此選項用於指示是否保持專案的縱橫比（高度和寬度）。預設值為false。

它可以是以下型別 -

  • Boolean - 如果此值設定為true，則元素將保持其原始縱橫比。

  • Number - 指定元素在調整大小時保持特定縱橫比。

語法

$( ".selector" ).resizable({ aspectRatio: true });
6 autoHide

此選項用於隱藏放大鏡圖示或手柄，除非滑鼠懸停在專案上。預設值為false。

選項 - autoHide

此選項用於隱藏放大鏡圖示或手柄，除非滑鼠懸停在專案上。預設值為false。

語法

$( ".selector" ).resizable({ autoHide: true });
7 cancel

此選項用於防止在指定元素上調整大小。預設值為input,textarea,button,select,option。

選項 - cancel

此選項用於防止在指定元素上調整大小。預設值為input,textarea,button,select,option。

語法

$( ".selector" ).resizable({ cancel: ".cancel" });
8 containment

此選項用於限制指定元素或區域內元素的大小調整。預設值為false。

選項 - containment

此選項用於限制指定元素或區域內元素的大小調整。預設值為false。

它可以是以下型別 -

  • Selector - 此型別指示可調整大小的元素僅包含在選擇器找到的列表中的第一個專案中。

  • Element - 此型別指示任何 DOM 元素。可調整大小的元素將包含在此元素的邊界框中。

  • String - 此型別的可能值為 - parent 和 document。

語法

$( ".selector" ).resizable({ containment: "parent" });
9 delay

此選項用於設定公差或延遲（以毫秒為單位）。此後將開始調整大小或位移。預設值為0。

選項 - delay

此選項用於設定公差或延遲（以毫秒為單位）。此後將開始調整大小或位移。預設值為0。

語法

$( ".selector" ).resizable({ delay: 150 });
10 disabled

當設定為true時，此選項停用調整大小機制。滑鼠不再調整元素的大小，直到使用 resizable (“enable”) 啟用機制為止。預設值為false。

選項 - disabled

當設定為true時，此選項停用調整大小機制。滑鼠不再調整元素的大小，直到使用 resizable (“enable”) 啟用機制為止。預設值為false。

語法

$( ".selector" ).resizable({ disabled: true });
11 distance

使用此選項，僅當滑鼠移動一定距離（畫素）時，調整大小才會開始。預設值為1 畫素。這可以幫助防止在單擊元素時意外調整大小。

選項 - distance

使用此選項，僅當滑鼠移動一定距離（畫素）時，調整大小才會開始。預設值為1 畫素。這可以幫助防止在單擊元素時意外調整大小。

語法

$( ".selector" ).resizable({ distance: 30 });
12 ghost

當設定為true時，此選項會顯示一個半透明的輔助元素以進行調整大小。釋放滑鼠時，此幽靈元素將被刪除。預設值為false。

選項 - ghost

當設定為true時，此選項會顯示一個半透明的輔助元素以進行調整大小。釋放滑鼠時，此幽靈元素將被刪除。預設值為false。

語法

$( ".selector" ).resizable({ ghost: true });
13 grid

此選項的型別為 Array [x, y]，指示元素在滑鼠移動期間水平和垂直擴充套件的畫素數。預設值為false。

選項 - grid

此選項的型別為 Array [x, y]，指示元素在滑鼠移動期間水平和垂直擴充套件的畫素數。預設值為false。

語法

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
14 handles

此選項是一個字元字串，指示元素的哪些邊或角可以調整大小。預設值為e, s, se。

選項 - handles

此選項是一個字元字串，指示元素的哪些邊或角可以調整大小。可能的值為：n、e、s 和 w 表示四邊，ne、se、nw 和 sw 表示四個角。字母 n、e、s 和 w 代表四個基點（北、南、東和西）。

預設值為e, s, se。

語法

$( ".selector" ).resizable({ handles: "n, e, s, w" });
15 helper

此選項用於新增 CSS 類以設定要調整大小的元素的樣式。當元素調整大小時，會建立一個新的<div>元素，該元素是縮放的元素（ui-resizable-helper 類）。調整大小完成後，原始元素的大小會改變，並且<div>元素會消失。預設值為false。

選項 - helper

此選項用於新增 CSS 類以設定要調整大小的元素的樣式。當元素調整大小時，會建立一個新的<div>元素，該元素是縮放的元素（ui-resizable-helper 類）。調整大小完成後，原始元素的大小會改變，並且<div>元素會消失。預設值為false。

語法

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 maxHeight

此選項用於設定可調整大小的元素允許調整到的最大高度。預設值為null。

選項 - maxHeight

此選項用於設定可調整大小的元素允許調整到的最大高度。預設值為null。

語法

$( ".selector" ).resizable({ maxHeight: 300 });
17 maxWidth

此選項用於設定可調整大小的元素允許調整到的最大寬度。預設值為null。

選項 - maxWidth

此選項用於設定可調整大小的元素允許調整到的最大寬度。預設值為null。

語法

$( ".selector" ).resizable({ maxWidth: 300 });
18 minHeight

此選項用於設定可調整大小的元素允許調整到的最小高度。預設值為10。

選項 - minHeight

此選項用於設定可調整大小的元素允許調整到的最小高度。預設值為10。

語法

$( ".selector" ).resizable({ minHeight: 150 });
19 minWidth

此選項用於設定可調整大小的元素允許調整到的最小寬度。預設值為10。

選項 - minWidth

此選項用於設定可調整大小的元素允許調整到的最小寬度。預設值為10。

它可以是以下型別 -

語法

$( ".selector" ).resizable({ minWidth: 150 });

以下部分將向您展示一些調整大小功能的工作示例。

預設功能

以下示例演示了 resizable 功能的簡單示例，未將任何引數傳遞給resizable() 方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小。

使用 animate 和 ghost

以下示例演示了在 JqueryUI 的調整大小函式中使用兩個選項animate 和ghost。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您也必須看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小，並檢視 animate 和 ghost 選項的效果。

使用 containment、minHeight 和 minWidth

以下示例演示了在 JqueryUI 的調整大小函式中使用三個選項containment、minHeight 和minWidth。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小，您無法調整超出主容器的大小。

使用 delay、distance 和 autoHide

以下示例演示了在 JqueryUI 的調整大小函式中使用三個選項delay、distance 和autoHide。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小，您會注意到 -

  • 第一個方形框在延遲 1000 毫秒後調整大小，

  • 第二個方形框在滑鼠移動 40 畫素後開始調整大小。

  • 將滑鼠懸停在第三個方形框上，放大鏡圖示就會出現。

使用 alsoResize

以下示例演示了在 JqueryUI 的調整大小函式中使用選項alsoResize。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小，您會注意到第二個方形框也會隨著第一個方形框一起調整大小。

使用 AspectRatio、Grid

以下示例演示了在 JqueryUI 的調整大小函式中使用選項aspectRatio 和grid。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

讓我們將上述程式碼儲存在一個 HTML 檔案resizeexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

拖動方形邊框以調整大小，第一個方形框將以 10 / 3 的縱橫比調整大小，第二個方形框將以 [50,20] 的網格調整大小。

$ (selector, context).resizable ("action", params) 方法

resizable("action", params) 方法可以對可調整大小的元素執行操作，例如允許或阻止調整大小功能。操作在第一個引數中指定為字串（例如，"disable" 用於阻止調整大小）。在下面的表格中檢視可以傳遞的操作。

語法

$(selector, context).resizable ("action", params);;

下表列出了可與此方法一起使用的不同操作 -

序號 操作 & 描述
1 destroy

此操作完全銷燬元素的可調整大小功能。這將使元素恢復到其初始化前的狀態。

操作 - destroy

此操作完全銷燬元素的可調整大小功能。這將使元素恢復到其初始化前的狀態。此方法不接受任何引數。

語法

 $( ".selector" ).resizable("destroy");
2 disable

此操作停用元素的可調整大小功能。此方法不接受任何引數。

操作 - disable

此操作停用元素的可調整大小功能。此方法不接受任何引數。

語法

 $( ".selector" ).resizable("disable");
3 enable

此操作啟用元素的可調整大小功能。此方法不接受任何引數。

操作 - enable

此操作啟用元素的可調整大小功能。此方法不接受任何引數。

語法

$( ".selector" ).resizable("enable");
4 option( optionName )

此操作檢索指定optionName的值。此選項對應於與 resizable(options) 一起使用的選項之一。

操作 - option( optionName )

此操作檢索指定optionName的值。此選項對應於與 resizable(options) 一起使用的選項之一。

語法

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 option()

獲取一個包含表示當前可調整大小選項雜湊的鍵/值對的物件。此方法不接受任何引數。

操作 - option()

獲取一個包含表示當前可調整大小選項雜湊的鍵/值對的物件。此方法不接受任何引數。

語法

 
var options = $( ".selector" ).resizable( "option" );
6 option(optionName, value )

此操作設定具有指定optionName的可調整大小選項的值。此選項對應於與 resizable(options) 一起使用的選項之一。

操作 - option( optionName, value )

此操作設定具有指定optionName的可調整大小選項的值。此選項對應於與 resizable(options) 一起使用的選項之一。

語法

 
$( ".selector" ).resizable( "option", "disabled", true );
7 option( options )

此操作為可調整大小元素設定一個或多個選項。

操作 - option( options )

此操作為可調整大小元素設定一個或多個選項。

語法

 
$( ".selector" ).resizable( "option", { disabled: true } );
8 widget()

此操作返回一個包含可調整大小元素的jQuery物件。此方法不接受任何引數。

操作 - widget()

此操作返回一個包含可調整大小元素的jQuery物件。此方法不接受任何引數。

語法

 
var widget = $( ".selector" ).resizable( "widget" );

示例

現在讓我們看看一個使用上表中操作的示例。以下示例演示了destroy()和disable()方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出 -

您無法調整第一個方框的大小，因為它已停用，而第二個方框已被銷燬。

可調整大小元素上的事件管理

除了我們在前面章節中看到的 resizable(options) 方法之外，JqueryUI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面 -

序號 事件方法 & 描述
1 create(event, ui)

當建立可調整大小的元素時觸發此事件。

事件 - create(event, ui)

當建立可調整大小的元素時觸發此事件。其中event的型別為Event，ui的型別為Object。

語法

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 resize(event, ui)

當可調整大小元素的控制代碼被拖動時觸發此事件。

事件 - resize(event, ui)

當可調整大小元素的控制代碼被拖動時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • element - 表示可調整大小元素的 jQuery 物件。

  • helper - 表示正在調整大小的輔助元素的 jQuery 物件。

  • originalElement - 表示在包裝之前原始元素的 jQuery 物件。

  • originalPosition - 表示在調整大小之前 {left, top} 的位置。

  • originalSize - 表示在調整大小之前 { width, height } 的大小。

  • position - 表示當前 {left, top} 位置。

  • size - 表示當前 { width, height } 的大小。

語法

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 start(event, ui)

在調整大小操作開始時觸發此事件。

事件 - start(event, ui)

在調整大小操作開始時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • element - 表示可調整大小元素的 jQuery 物件。

  • helper - 表示正在調整大小的輔助元素的 jQuery 物件。

  • originalElement - 表示在包裝之前原始元素的 jQuery 物件。

  • originalPosition - 表示在調整大小之前 {left, top} 的位置。

  • originalSize - 表示在調整大小之前 { width, height } 的大小。

  • position - 表示當前 {left, top} 位置。

  • size - 表示當前 { width, height } 的大小。

語法

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 stop(event, ui)

在調整大小操作結束時觸發此事件。

事件 - stop(event, ui)

在調整大小操作結束時觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值為 -

  • element - 表示可調整大小元素的 jQuery 物件。

  • helper - 表示正在調整大小的輔助元素的 jQuery 物件。

  • originalElement - 表示在包裝之前原始元素的 jQuery 物件。

  • originalPosition - 表示在調整大小之前 {left, top} 的位置。

  • originalSize - 表示在調整大小之前 { width, height } 的大小。

  • position - 表示當前 {left, top} 位置。

  • size - 表示當前 { width,height } 的大小。

語法

$( ".selector" ).resizable({
stop: function( event, ui ) {}
});

示例

以下示例演示了在調整大小功能期間事件方法的使用。此示例演示了create和resize事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

讓我們將以上程式碼儲存在一個名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出 -

拖動方框，您將在調整大小事件中看到輸出顯示。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.