Jqueryui-resizable

提供：Dev Guides
移動先:案内、検索

JqueryUI-サイズ変更可能

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

構文

  • resizable（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_resizable＃resizable_options [$（selector、context）.resizable（options）]メソッド
  • link：/jqueryui/jqueryui_resizable＃resizable_methods [$（selector、context）.resizable（ "action"、params）]メソッド

[resizable_options]#

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

_resizable（options）_メソッドは、HTML要素のサイズを変更できることを宣言します。 _options_パラメーターは、サイズ変更時に関連する要素の動作を指定するオブジェクトです。

構文

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

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

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

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

alsoResize

このオプションのタイプは、Selector _、 jQuery_、または任意のDOM _Element_です。 元のオブジェクトのサイズを変更するときにサイズ変更する要素も表します。 デフォルトでは、その値は false です。

  • オプション-alsoResize *

このオプションは、Selector _、 jQuery_、または任意のDOM _Element_タイプにすることができます。 元のオブジェクトのサイズを変更するときにサイズ変更する要素も表します。 デフォルトでは、その値は false です。

これはタイプにすることができます-

  • Selector -このタイプは、サイズ変更のためにDOMドキュメントから選択されるDOM要素を示します。
  • jQuery -ページ上のサイズ変更可能な要素ごとにコールバック関数が呼び出されます。 要素のサイズが変更された場合、この関数は_true_を返す必要があります。
  • 要素-ドキュメントオブジェクトモデル（DOM）の要素。

構文 

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

animate

このオプションを true に設定すると、マウスボタンを放したときにサイズ変更中に視覚効果が有効になります。 デフォルト値は false （効果なし）です。

オプション-アニメーション

このオプションを true に設定すると、マウスボタンを放したときにサイズ変更中に視覚効果が有効になります。 デフォルト値は false （効果なし）です。

構文 

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

animateDuration

このオプションは、サイズ変更効果の持続時間（ミリ秒単位）を設定するために使用されます。 このオプションは、 animate オプションが_true_の場合にのみ使用されます。 デフォルトでは、値は "slow" です。

  • オプション-animateDuration *

このオプションは、サイズ変更効果の持続時間（ミリ秒単位）を設定するために使用されます。 このオプションは、 animate オプションが_true_の場合にのみ使用されます。 デフォルトでは、値は "slow" です。

これはタイプにすることができます-

  • Number -これはミリ秒単位で期間を指定します
  • 文字列-これは、「遅い」や「速い」などの名前付き期間を指定します。

構文 

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

animateEasing

このオプションは、 animate オプションを使用するときに適用する_easing_を指定するために使用されます。 デフォルトでは、その値は "swing" です。

  • オプション-animateEasing *

このオプションは、 animate オプションを使用するときに適用する_easing_を指定するために使用されます。 デフォルトでは、その値は "swing" です。

イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。

構文 

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

aspectRatio

このオプションは、アイテムの縦横比（高さと幅）を維持するかどうかを示すために使用されます。 デフォルトでは、その値は false です。

  • オプション-aspectRatio *

このオプションは、アイテムの縦横比（高さと幅）を維持するかどうかを示すために使用されます。 デフォルトでは、その値は false です。

これはタイプにすることができます-

  • ブール-この値が_true_に設定されている場合、要素は元のアスペクト比を維持します。
  • Number -サイズ変更中に特定のアスペクト比を維持する要素を指定します。

構文 

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

autoHide

このオプションは、マウスがアイテム上にある場合を除き、拡大アイコンまたはハンドルを非表示にするために使用されます。 デフォルトでは、その値は false です。

  • オプション-autoHide *

このオプションは、マウスがアイテム上にある場合を除き、拡大アイコンまたはハンドルを非表示にするために使用されます。 デフォルトでは、その値は false です。

構文 

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

cancel

このオプションは、指定された要素のサイズ変更を防ぐために使用されます。 デフォルトでは、その値は input、textarea、button、select、option です。

オプション-キャンセル

このオプションは、指定された要素のサイズ変更を防ぐために使用されます。 デフォルトでは、その値は input、textarea、button、select、option です。

構文 

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

containment

このオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。 デフォルトでは、その値は false です。

オプション-封じ込め

このオプションは、指定された要素または領域内の要素のサイズ変更を制限するために使用されます。 デフォルトでは、その値は false です。

これはタイプにすることができます-

  • Selector -このタイプは、サイズ変更可能な要素が、セレクターによって検出されたリストの最初の項目のみに含まれることを示します。
  • 要素-このタイプは、DOM要素を示します。 サイズ変更可能な要素は、この要素の境界ボックスに含まれます。
  • String -このタイプの可能な値は-_parent_および_document_です。

構文 

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

delay

このオプションは、許容値または遅延をミリ秒単位で設定するために使用されます。 その後、サイズ変更または移動が開始されます。 デフォルトでは、その値は 0 です。

オプション-遅延

このオプションは、許容値または遅延をミリ秒単位で設定するために使用されます。 その後、サイズ変更または移動が開始されます。 デフォルトでは、その値は 0 です。

構文 

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

disabled

このオプションは、_true_に設定されている場合、サイズ変更メカニズムを無効にします。 マウスは、サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、要素のサイズを変更しません。 デフォルトでは、その値は false です。

オプション-無効

このオプションは、_true_に設定されている場合、サイズ変更メカニズムを無効にします。 マウスは、サイズ変更可能（「有効化」）を使用してメカニズムが有効になるまで、要素のサイズを変更しません。 デフォルトでは、その値は false です。

構文 

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

distance

このオプションを使用すると、マウスが距離（ピクセル）を移動したときにのみサイズ変更が開始されます。 デフォルトでは、その値は* 1ピクセル*です。 これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。

オプション-距離

このオプションを使用すると、マウスが距離（ピクセル）を移動したときにのみサイズ変更が開始されます。 デフォルトでは、その値は* 1ピクセル*です。 これにより、要素をクリックしたときに意図しないサイズ変更を防ぐことができます。

構文 

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

ghost

このオプションを_true_に設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。 このゴーストアイテムは、マウスを離すと削除されます。 デフォルトでは、その値は false です。

オプション-ゴースト

このオプションを_true_に設定すると、サイズ変更のために半透明のヘルパー要素が表示されます。 このゴーストアイテムは、マウスを離すと削除されます。 デフォルトでは、その値は false です。

構文 

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

grid

このオプションのタイプは配列[x、y]で、マウスの移動中に要素が水平および垂直に拡大するピクセル数を示します。 デフォルトでは、その値は false です。

オプション-グリッド

このオプションのタイプは配列[x、y]で、マウスの移動中に要素が水平および垂直に拡大するピクセル数を示します。 デフォルトでは、その値は false です。

構文 

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

handles

このオプションは、要素のどの側面または角度をサイズ変更できるかを示す文字列です。 デフォルトでは、その値は e、s、se です。

オプション-ハンドル

このオプションは、要素のどの側面または角度をサイズ変更できるかを示す文字列です。 可能な値は次のとおりです。4つの辺は_n、e、s、、 w_、4つの角は_ne、se、nw、、 sw_です。 文字_n、e、s、_、および_w_は、4つの基本ポイント（北、南、東、および西）を表します。

デフォルトでは、その値は e、s、se です。

構文 

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

helper

このオプションは、サイズ変更する要素のスタイルを設定するCSSクラスを追加するために使用されます。 要素のサイズが変更されると、新しい<div>要素が作成されます。これは、スケーリングされる要素（ui-resizable-helperクラス）です。 サイズ変更が完了すると、元の要素のサイズが変更され、<div>要素が消えます。 デフォルトでは、その値は false です。

オプション-ヘルパー

このオプションは、サイズ変更する要素のスタイルを設定する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（）*メソッドにパラメーターを渡さない、サイズ変更可能な機能の簡単な例を示しています。 

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

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

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

次の例は、JqueryUIのサイズ変更関数で2つのオプション 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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

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

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

次の例は、JqueryUIのサイズ変更関数で3つのオプション 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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

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

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

次の例は、JqueryUIのサイズ変更関数で3つのオプション 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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

サイズを変更するには正方形の境界線をドラッグし、あなたがそれに気づくことができます-

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

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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

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

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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力が表示されます。 今、あなたは結果で遊ぶことができます-

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

[resizable_methods]#

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

_resizable（ "action"、params）_メソッドは、サイズ変更機能の許可または禁止など、サイズ変更可能な要素に対してアクションを実行できます。 アクションは、最初の引数で文字列として指定されます（サイズ変更を防ぐために「無効」など）。 次の表で、渡すことができるアクションを確認してください。

構文

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

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

Sr.No. Action & Description
1

destroy

このアクションは、要素のサイズ変更可能な機能を完全に破壊します。 これにより、要素は初期化前の状態に戻ります。

アクション-破壊

このアクションは、要素のサイズ変更可能な機能を完全に破壊します。 これにより、要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

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

disable

このアクションは、要素のサイズ変更機能を無効にします。 このメソッドは引数を取りません。

アクション-無効

このアクションは、要素のサイズ変更機能を無効にします。 このメソッドは引数を取りません。

構文 

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

enable

このアクションにより、要素のサイズ変更機能が有効になります。 このメソッドは引数を取りません。

アクション-有効

このアクションにより、要素のサイズ変更機能が有効になります。 このメソッドは引数を取りません。

構文 

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

option( optionName )

このアクションは、指定された_optionName_の値を取得します。 このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。

アクション-option（optionName）

このアクションは、指定された_optionName_の値を取得します。 このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。

構文 

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

option()

現在のサイズ変更可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。 これは引数を受け入れません。

アクション-option（）

現在のサイズ変更可能なオプションのハッシュを表すキー/値のペアを含むオブジェクトを取得します。 これは引数を受け入れません。

構文 

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

option(optionName, value )

このアクションは、指定された_optionName_を使用して、サイズ変更可能なオプションの値を設定します。 このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。

アクション-option（optionName、value）

このアクションは、指定された_optionName_を使用して、サイズ変更可能なオプションの値を設定します。 このオプションは、サイズ変更可能（オプション）で使用されるオプションの1つに対応します。

構文 

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

option( options )

このアクションは、サイズ変更可能なオプションを1つ以上設定します。

アクション-オプション（オプション）

このアクションは、サイズ変更可能なオプションを1つ以上設定します。

構文 

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

widget()

このアクションは、サイズ変更可能な要素を含む_jQuery_オブジェクトを返します。 このメソッドは引数を取りません。

アクション-ウィジェット（）

このアクションは、サイズ変更可能な要素を含む_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>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されます-

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

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

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

Sr.No. Event Method & Description
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}として表される現在の位置。
  • サイズ-\ {幅、高さ}として表される現在のサイズ。

構文 

$( ".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}として表される現在の位置。
  • サイズ-\ {幅、高さ}として表される現在のサイズ。

構文 

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

stop(event, ui)

このイベントは、サイズ変更操作の最後にトリガーされます。

イベント-停止（イベント、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>

上記のコードをHTMLファイル resizeexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力が表示されるはずです-

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

「https://www.finddevguides.com/index.php?title=Jqueryui-resizable&oldid=2347」から取得
Powered by MediaWiki