JqueryUI-サイズ変更可能

jQueryUIは、DOM要素のサイズを変更するためのresizable（）メソッドを提供します。このメソッドは、要素のサイズ変更を簡素化します。そうしないと、HTMLでのコーディングに時間と多くの時間がかかります。サイズ変更可能な（）メソッドは、サイズ変更するアイコンをアイテムの右下に表示します。

構文

ザ・ resizable() メソッドは2つの形式で使用できます-

$（セレクター、コンテキスト）.resizable（オプション）メソッド
$（selector、context）.resizable（ "action"、params）メソッド

$（セレクター、コンテキスト）.resizable（オプション）メソッド

サイズ変更可能（オプション）メソッドは、HTML要素をサイズ変更できることを宣言します。オプションサイズ変更するときに、要素の挙動が関与指定するオブジェクトであるパラメータ。

構文

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

Javascriptオブジェクトを使用するときに、一度に1つ以上のオプションを提供できます。提供するオプションが複数ある場合は、次のようにコンマを使用してそれらを区切ります-

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

次の表に、この方法で使用できるさまざまなオプションを示します。


$( ".selector" ).resizable({ alsoResize: "#identifier" });
$( ".selector" ).resizable({ animate: true });
$( ".selector" ).resizable({ animateDuration: "fast" });
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
$( ".selector" ).resizable({ aspectRatio: true });
$( ".selector" ).resizable({ autoHide: true });
$( ".selector" ).resizable({ cancel: ".cancel" });
$( ".selector" ).resizable({ containment: "parent" });
$( ".selector" ).resizable({ delay: 150 });
$( ".selector" ).resizable({ disabled: true });
$( ".selector" ).resizable({ distance: 30 });
$( ".selector" ).resizable({ ghost: true });
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
$( ".selector" ).resizable({ handles: "n, e, s, w" });
$( ".selector" ).resizable({ helper: "resizable-helper" });
$( ".selector" ).resizable({ maxHeight: 300 });
$( ".selector" ).resizable({ maxWidth: 300 });
$( ".selector" ).resizable({ minHeight: 150 });
$( ".selector" ).resizable({ minWidth: 150 });

シニア番号	オプションと説明
1	また、サイズ変更このオプションのタイプは、Selector、jQuery、または任意のDOM要素です。これは、元のオブジェクトのサイズを変更するときにもサイズ変更される要素を表します。デフォルトでは、その値はfalse。 Option - alsoResize このオプションは、Selector、jQuery、または任意のDOM要素のタイプにすることができます。これは、元のオブジェクトのサイズを変更するときにもサイズ変更される要素を表します。デフォルトでは、その値はfalse。これはタイプの可能性があります- Selector −このタイプは、サイズ変更のためにDOMドキュメントから選択されるDOM要素を示します。 jQuery−ページ上のサイズ変更可能な要素ごとにコールバック関数が呼び出されます。要素のサイズが変更された場合、この関数はtrueを返す必要があります。 Element −ドキュメントオブジェクトモデル（DOM）の要素。 Syntax `$( ".selector" ).resizable({ alsoResize: "#identifier" });`
2	アニメートこのオプションをに設定すると trueマウスボタンを離したときにサイズ変更中に視覚効果を有効にするために使用されます。デフォルト値はfalse （無効）。 Option - animate このオプションをに設定すると trueマウスボタンを離したときにサイズ変更中に視覚効果を有効にするために使用されます。デフォルト値はfalse （無効）。 Syntax `$( ".selector" ).resizable({ animate: true });`
3	animateDuration このオプションは、サイズ変更効果の期間（ミリ秒単位）を設定するために使用されます。このオプションは、次の場合にのみ使用されますanimateオプションはtrueです。デフォルトでは、その値は"slow"。 Option - animateDuration このオプションは、サイズ変更効果の期間（ミリ秒単位）を設定するために使用されます。このオプションは、次の場合にのみ使用されますanimateオプションはtrueです。デフォルトでは、その値は"slow"。これはタイプの可能性があります- Number −これはミリ秒単位で期間を指定します String −これは、「遅い」や「速い」などの名前付き期間を区切ります。 Syntax `$( ".selector" ).resizable({ animateDuration: "fast" });`
4	animateEasing このオプションは、を使用するときに適用するイージングを指定するために使用されますanimateオプション。デフォルトでは、その値は"swing"。 Option - animateEasing このオプションは、を使用するときに適用するイージングを指定するために使用されますanimateオプション。デフォルトでは、その値は"swing"。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。 Syntax `$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });`
5	アスペクト比このオプションは、アイテムのアスペクト（高さと幅）の比率を維持するかどうかを示すために使用されます。デフォルトでは、その値はfalse。 Option - aspectRatio このオプションは、アイテムのアスペクト（高さと幅）の比率を維持するかどうかを示すために使用されます。デフォルトでは、その値はfalse。これはタイプの可能性があります- Boolean−この値をtrueに設定すると、要素は元のアスペクト比を維持します。 Number −これは、サイズ変更中に特定のアスペクト比を維持する要素を指定します。 Syntax `$( ".selector" ).resizable({ aspectRatio: true });`
6	autoHide このオプションは、マウスがアイテムの上にある場合を除いて、拡大アイコンまたはハンドルを非表示にするために使用されます。デフォルトでは、その値はfalse。 Option - autoHide このオプションは、マウスがアイテムの上にある場合を除いて、拡大アイコンまたはハンドルを非表示にするために使用されます。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).resizable({ autoHide: true });`
7	キャンセルこのオプションは、指定された要素のサイズ変更を防ぐために使用されます。デフォルトでは、その値はinput,textarea,button,select,option。 Option - cancel このオプションは、指定された要素のサイズ変更を防ぐために使用されます。デフォルトでは、その値はinput,textarea,button,select,option。 Syntax `$( ".selector" ).resizable({ cancel: ".cancel" });`
8	封じ込めこのオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。デフォルトでは、その値はfalse。 Option - containment このオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。デフォルトでは、その値はfalse。これはタイプの可能性があります- Selector −このタイプは、サイズ変更可能な要素が、セレクターによって検出されたリストの最初の項目にのみ含まれることを示します。 Element−このタイプは、任意のDOM要素を示します。サイズ変更可能な要素は、この要素のバウンディングボックスに含まれます。 String−このタイプに使用できる値は-parentおよびdocumentです。 Syntax `$( ".selector" ).resizable({ containment: "parent" });`
9	ディレイこのオプションは、許容誤差または遅延をミリ秒単位で設定するために使用されます。その後、サイズ変更または変位が開始されます。デフォルトでは、その値は0。 Option - delay このオプションは、許容誤差または遅延をミリ秒単位で設定するために使用されます。その後、サイズ変更または変位が開始されます。デフォルトでは、その値は0。 Syntax `$( ".selector" ).resizable({ delay: 150 });`
10	無効このオプションをtrueに設定すると、サイズ変更メカニズムが無効になります。サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、マウスは要素のサイズを変更しなくなりました。デフォルトでは、その値はfalse。 Option - disabled このオプションをtrueに設定すると、サイズ変更メカニズムが無効になります。サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、マウスは要素のサイズを変更しなくなりました。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).resizable({ disabled: true });`
11	距離このオプションを使用すると、マウスが距離（ピクセル）移動したときにのみサイズ変更が開始されます。デフォルトでは、その値は1 pixel。これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。 Option - distance このオプションを使用すると、マウスが距離（ピクセル）移動したときにのみサイズ変更が開始されます。デフォルトでは、その値は1 pixel。これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。 Syntax `$( ".selector" ).resizable({ distance: 30 });`
12	幽霊このオプションをtrueに設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。このゴーストアイテムは、マウスを離すと削除されます。デフォルトでは、その値はfalse。 Option - ghost このオプションをtrueに設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。このゴーストアイテムは、マウスを離すと削除されます。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).resizable({ ghost: true });`
13	グリッドこのオプションのタイプはArray [x、y]で、マウスの移動中に要素が水平方向および垂直方向に拡張するピクセル数を示します。デフォルトでは、その値はfalse。 Option - grid このオプションのタイプはArray [x、y]で、マウスの移動中に要素が水平方向および垂直方向に拡張するピクセル数を示します。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).resizable({ grid: [ 20, 10 ] });`
14	ハンドルこのオプションは、要素のどの辺または角度のサイズを変更できるかを示す文字列です。デフォルトでは、その値はe, s, se。 Option - handles このオプションは、要素のどの辺または角度のサイズを変更できるかを示す文字列です。可能な値は、4つの側面の場合はn、e、s、およびwであり、4つのコーナーの場合はne、se、nw、およびswです。文字n、e、s、およびwは、4つの基本ポイント（北、南、東、および西）を表します。デフォルトでは、その値は e, s, se。 Syntax `$( ".selector" ).resizable({ handles: "n, e, s, w" });`
15	ヘルパーこのオプションは、CSSクラスを追加して、サイズを変更する要素のスタイルを設定するために使用されます。要素のサイズが変更されると、新しい<div>要素が作成されます。これは、スケーリングされる要素です（ui-resizable-helperクラス）。サイズ変更が完了すると、元の要素のサイズが変更され、<div>要素が表示されなくなります。デフォルトでは、その値はfalse。 Option - helper このオプションは、CSSクラスを追加して、サイズを変更する要素のスタイルを設定するために使用されます。要素のサイズが変更されると、新しい<div>要素が作成されます。これは、スケーリングされる要素です（ui-resizable-helperクラス）。サイズ変更が完了すると、元の要素のサイズが変更され、<div>要素が表示されなくなります。デフォルトでは、その値はfalse。 Syntax `$( ".selector" ).resizable({ helper: "resizable-helper" });`
16	maxHeight このオプションは、サイズ変更可能な最大の高さを設定するために使用されます。デフォルトでは、その値はnull。 Option - maxHeight このオプションは、サイズ変更可能な最大の高さを設定するために使用されます。デフォルトでは、その値はnull。 Syntax `$( ".selector" ).resizable({ maxHeight: 300 });`
17	maxWidth このオプションは、サイズ変更可能な最大幅を設定するために使用されます。デフォルトでは、その値はnull。 Option - maxWidth このオプションは、サイズ変更可能な最大幅を設定するために使用されます。デフォルトでは、その値はnull。 Syntax `$( ".selector" ).resizable({ maxWidth: 300 });`
18	minHeight このオプションは、サイズ変更可能な最小の高さを設定するために使用されます。デフォルトでは、その値は10。 Option - minHeight このオプションは、サイズ変更可能な最小の高さを設定するために使用されます。デフォルトでは、その値は10。 Syntax `$( ".selector" ).resizable({ minHeight: 150 });`
19	minWidth このオプションは、サイズ変更可能な最小幅を設定するために使用されます。デフォルトでは、その値は10。 Option - minWidth このオプションは、サイズ変更可能な最小幅を設定するために使用されます。デフォルトでは、その値は10。これはタイプの可能性があります- Syntax `$( ".selector" ).resizable({ minWidth: 150 });`

次のセクションでは、サイズ変更機能の実用的な例をいくつか示します。

デフォルトの機能

次の例は、サイズ変更可能な機能の簡単な例を示しています。 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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力が表示されます。今、あなたは結果で遊ぶことができます-

正方形の境界線をドラッグしてサイズを変更します。

アニメートとゴーストの使用

次の例は、2つのオプションの使用法を示しています animate そして ghost JqueryUIのサイズ変更機能で。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

正方形の境界線をドラッグしてサイズを変更し、アニメーションオプションとゴーストオプションの効果を確認します。

包含、minHeight、およびminWidthの使用

次の例は、3つのオプションの使用法を示しています containment、 minHeight そして minWidth JqueryUIのサイズ変更機能で。

<!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>

正方形の境界線をドラッグしてサイズを変更します。メインコンテナを超えてサイズを変更することはできません。

遅延、距離、および自動非表示の使用

次の例は、3つのオプションの使用法を示しています delay、 distance そして autoHide JqueryUIのサイズ変更機能で。

<!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>

正方形の境界線をドラッグしてサイズを変更すると、次のことがわかります。

最初の四角いボックスは、1000msの遅延後にサイズが変更されます。
マウスが40px移動すると、2番目の四角いボックスのサイズ変更が始まります。
3番目の四角いボックスにマウスを合わせると、拡大アイコンが表示されます。

alsoResizeの使用

次の例は、オプションの使用法を示しています alsoResize JqueryUIのサイズ変更機能で。

<!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>

正方形の境界線をドラッグしてサイズを変更すると、2番目の正方形のボックスも最初の正方形のボックスと同じサイズになります。

アスペクト比、グリッドの使用

次の例は、オプションの使用法を示しています aspectRatio そして grid JqueryUIのサイズ変更機能で。

<!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>

正方形の境界線をドラッグしてサイズを変更します。最初の正方形のボックスはアスペクト比10/3でサイズ変更され、2番目の正方形のボックスは[50,20]のグリッドでサイズ変更されます。

$（selector、context）.resizable（ "action"、params）メソッド

サイズ変更可能（「アクション」は、paramsは）方法は、許可またはサイズ変更機能を防止するようサイズ変更可能な要素にアクションを実行することができます。アクションは、最初の引数で文字列として指定されます（たとえば、サイズ変更を防ぐために「無効」）。次の表で、渡すことができるアクションを確認してください。

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。


$( ".selector" ).resizable("destroy");
$( ".selector" ).resizable("disable");
$( ".selector" ).resizable("enable");
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
var options = $( ".selector" ).resizable( "option" );
$( ".selector" ).resizable( "option", "disabled", true );
$( ".selector" ).resizable( "option", { disabled: true } );
var widget = $( ".selector" ).resizable( "widget" );

シニア番号	アクションと説明
1	破壊このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素が初期化前の状態に戻ります。 Action - destroy このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素が初期化前の状態に戻ります。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("destroy");`
2	無効にするこのアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を受け入れません。 Action - disable このアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("disable");`
3	有効にするこのアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を受け入れません。 Action - enable このアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("enable");`
4	option（optionName）このアクションは、指定されたoptionNameの値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Action - option( optionName ) このアクションは、指定されたoptionNameの値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Syntax `var isDisabled = $( ".selector" ).resizable( "option", "disabled" );`
5	オプション（）現在のサイズ変更可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。これは引数を受け入れません。 Action - option() 現在のサイズ変更可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。これは引数を受け入れません。 Syntax `var options = $( ".selector" ).resizable( "option" );`
6	option（optionName、value）このアクションは、指定されたoptionNameでサイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Action - option( optionName, value ) このアクションは、指定されたoptionNameでサイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Syntax `$( ".selector" ).resizable( "option", "disabled", true );`
7	option（options）このアクションは、サイズ変更可能な1つ以上のオプションを設定します。 Action - option( options ) このアクションは、サイズ変更可能な1つ以上のオプションを設定します。 Syntax `$( ".selector" ).resizable( "option", { disabled: true } );`
8	ウィジェット（）このアクションは、サイズ変更可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Action - widget() このアクションは、サイズ変更可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Syntax `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>

上記のコードをHTMLファイルに保存しましょう resizeexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されます-

最初の四角いボックスは無効になっているため、サイズを変更することはできず、2番目の四角いボックスは破棄されます。

サイズ変更可能な要素のイベント管理

前のセクションで見たサイズ変更可能な（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドを以下に示します-

シニア番号	イベントの方法と説明
1	create（event、ui）このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。 Event - create(event, ui) このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Syntax `$( ".selector" ).resizable({ create: function( event, ui ) {} });`
2	サイズ変更（イベント、UI）このイベントは、サイズ変更可能な要素のハンドラーがドラッグされたときにトリガーされます。 Event - resize(event, ui) このイベントは、サイズ変更可能な要素のハンドラーがドラッグされたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {幅、高さ}として表される現在のサイズ。 Syntax `$( ".selector" ).resizable({ resize: function( event, ui ) {} });`
3	start（event、ui）このイベントは、サイズ変更操作の開始時にトリガーされます。 Event - start(event, ui) このイベントは、サイズ変更操作の開始時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {幅、高さ}として表される現在のサイズ。 Syntax `$( ".selector" ).resizable({ start: function( event, ui ) {} });`
4	stop（event、ui）このイベントは、サイズ変更操作の終了時にトリガーされます。 Event - stop(event, ui) このイベントは、サイズ変更操作の終了時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {width、height}として表される現在のサイズ。 Syntax `$( ".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>

上記のコードをHTMLファイルに保存しましょう resizeexample.htm javascriptをサポートする標準のブラウザで開くと、次の出力が表示されるはずです-

四角いボックスをドラッグすると、サイズ変更イベントで出力が表示されます。

シニア番号	アクションと説明
1	破壊このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素が初期化前の状態に戻ります。 Action - destroy このアクションは、要素のサイズ変更可能な機能を完全に破壊します。これにより、要素が初期化前の状態に戻ります。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("destroy");`
2	無効にするこのアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を受け入れません。 Action - disable このアクションは、要素のサイズ変更機能を無効にします。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("disable");`
3	有効にするこのアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を受け入れません。 Action - enable このアクションにより、要素のサイズ変更機能が有効になります。このメソッドは引数を受け入れません。 Syntax `$( ".selector" ).resizable("enable");`
4	option（optionName）このアクションは、指定されたoptionNameの値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Action - option( optionName ) このアクションは、指定されたoptionNameの値を取得します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Syntax `var isDisabled = $( ".selector" ).resizable( "option", "disabled" );`
5	オプション（）現在のサイズ変更可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。これは引数を受け入れません。 Action - option() 現在のサイズ変更可能なオプションハッシュを表すキーと値のペアを含むオブジェクトを取得します。これは引数を受け入れません。 Syntax `var options = $( ".selector" ).resizable( "option" );`
6	option（optionName、value）このアクションは、指定されたoptionNameでサイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Action - option( optionName, value ) このアクションは、指定されたoptionNameでサイズ変更可能なオプションの値を設定します。このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。 Syntax `$( ".selector" ).resizable( "option", "disabled", true );`
7	option（options）このアクションは、サイズ変更可能な1つ以上のオプションを設定します。 Action - option( options ) このアクションは、サイズ変更可能な1つ以上のオプションを設定します。 Syntax `$( ".selector" ).resizable( "option", { disabled: true } );`
8	ウィジェット（）このアクションは、サイズ変更可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Action - widget() このアクションは、サイズ変更可能な要素を含むjQueryオブジェクトを返します。このメソッドは引数を受け入れません。 Syntax `var widget = $( ".selector" ).resizable( "widget" );`

シニア番号	イベントの方法と説明
1	create（event、ui）このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。 Event - create(event, ui) このイベントは、サイズ変更可能な要素が作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。 Syntax `$( ".selector" ).resizable({ create: function( event, ui ) {} });`
2	サイズ変更（イベント、UI）このイベントは、サイズ変更可能な要素のハンドラーがドラッグされたときにトリガーされます。 Event - resize(event, ui) このイベントは、サイズ変更可能な要素のハンドラーがドラッグされたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {幅、高さ}として表される現在のサイズ。 Syntax `$( ".selector" ).resizable({ resize: function( event, ui ) {} });`
3	start（event、ui）このイベントは、サイズ変更操作の開始時にトリガーされます。 Event - start(event, ui) このイベントは、サイズ変更操作の開始時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {幅、高さ}として表される現在のサイズ。 Syntax `$( ".selector" ).resizable({ start: function( event, ui ) {} });`
4	stop（event、ui）このイベントは、サイズ変更操作の終了時にトリガーされます。 Event - stop(event, ui) このイベントは、サイズ変更操作の終了時にトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。 element −サイズ変更可能な要素を表すjQueryオブジェクト。 helper −サイズ変更されるヘルパーを表すjQueryオブジェクト。 originalElement −ラップされる前の元の要素を表すjQueryオブジェクト。 originalPosition −サイズ変更前の{left、top}として表される位置。 originalSize −サイズ変更前の{幅、高さ}で表されるサイズ。 position − {left、top}として表される現在の位置。 size − {width、height}として表される現在のサイズ。 Syntax `$( ".selector" ).resizable({ stop: function( event, ui ) {} });`