jQuery-サイズ変更可能なインタラクション

説明

*Resizeable* 関数は、JqueryUIのインタラクションで使用できます。 この機能を有効にできます。DOM要素のサイズ変更機能を使用できます。カーソルで右または下の境界線をつかみ、目的の幅または高さにドラッグします。

構文

ドラッグ可能を使用する簡単な構文は次のとおりです-

$( "#resizable" ).resizable();

例

以下は、Resize-ableの使用法を示す簡単な例です-

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

これにより、次の結果が生成されます–

Jquery-interactions-resizeable

目次

jQuery-サイズ変更可能なインタラクション

説明

構文

例