jQuery - Capacidade de redimensionamento de interação

Descrição

o Resize ablefunção pode ser usada com interações em JqueryUI. Esta função pode ser habilitada para a funcionalidade de redimensionamento em qualquer elemento DOM. Com o cursor, pegue a borda direita ou inferior e arraste até a largura ou altura desejada.

Sintaxe

Aqui está a sintaxe simples para usar arrastável -

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

Exemplo

A seguir está um exemplo simples que mostra o uso do redimensionável -

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

Isso produzirá o seguinte resultado -

jquery-interações.htm

↰ Previous page