JqueryUI - redimensionável

jQueryUI fornece o método resizable () para redimensionar qualquer elemento DOM. Este método simplifica o redimensionamento do elemento que, de outra forma, leva muito tempo e muita codificação em HTML. O método resizable () exibe um ícone no canto inferior direito do item a ser redimensionado.

Sintaxe

o resizable() método pode ser usado em duas formas -

Método $ (seletor, contexto). redimensionável (opções)
$ (seletor, contexto) .resizable ("ação", parâmetros) Método

Método $ (seletor, contexto). redimensionável (opções)

O método resizable (options) declara que um elemento HTML pode ser redimensionado. O parâmetro options é um objeto que especifica o comportamento dos elementos envolvidos no redimensionamento.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -


$( ".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 });

Sr. Não.	Opção e descrição
1	alsoResize Esta opção é do tipo Selector , jQuery ou qualquer elemento DOM . Representa elementos que também se redimensionam ao redimensionar o objeto original. Por padrão, seu valor éfalse. Option - alsoResize Esta opção pode ser do tipo Selector , jQuery ou qualquer Elemento DOM . Representa elementos que também se redimensionam ao redimensionar o objeto original. Por padrão, seu valor éfalse. Isso pode ser do tipo - Selector - Este tipo indica os elementos DOM a serem selecionados de um documento DOM para redimensionamento. jQuery- Uma função de retorno de chamada será chamada para cada elemento redimensionável na página. Esta função deve retornar verdadeiro se o elemento for redimensionado. Element - Um elemento no Document Object Model (DOM). Syntax `$( ".selector" ).resizable({ alsoResize: "#identifier" });`
2	animar Esta opção quando definida para trueé usado para ativar um efeito visual durante o redimensionamento, quando o botão do mouse é liberado. o valor padrão éfalse (sem efeito). Option - animate Esta opção quando definida para trueé usado para ativar um efeito visual durante o redimensionamento, quando o botão do mouse é liberado. o valor padrão éfalse (sem efeito). Syntax `$( ".selector" ).resizable({ animate: true });`
3	animateDuration Esta opção é usada para definir a duração (em milissegundos) do efeito de redimensionamento. Esta opção é usada apenas quandoanimateopção é verdadeira . Por padrão, seu valor é"slow". Option - animateDuration Esta opção é usada para definir a duração (em milissegundos) do efeito de redimensionamento. Esta opção é usada apenas quandoanimateopção é verdadeira . Por padrão, seu valor é"slow". Isso pode ser do tipo - Number - Isso especifica a duração em milissegundos String - Sepcifica a duração nomeada, como "lento" ou "rápido". Syntax `$( ".selector" ).resizable({ animateDuration: "fast" });`
4	animateEasing Esta opção é usada para especificar qual atenuação aplicar ao usar oanimateopção. Por padrão, seu valor é"swing". Option - animateEasing Esta opção é usada para especificar qual atenuação aplicar ao usar oanimateopção. Por padrão, seu valor é"swing". As funções de atenuação especificam a velocidade com que uma animação progride em diferentes pontos da animação. Syntax `$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });`
5	proporção da tela Esta opção é usada para indicar se a proporção (altura e largura) do item deve ser mantida. Por padrão, seu valor éfalse. Option - aspectRatio Esta opção é usada para indicar se a proporção (altura e largura) do item deve ser mantida. Por padrão, seu valor éfalse. Isso pode ser do tipo - Boolean- Este valor, se definido como verdadeiro , o elemento manterá sua proporção de aspecto original. Number - Isso especifica o elemento para manter uma proporção de aspecto específica durante o redimensionamento. Syntax `$( ".selector" ).resizable({ aspectRatio: true });`
6	ocultar automaticamente Esta opção é usada para ocultar o ícone de ampliação ou alças, exceto quando o mouse está sobre o item. Por padrão, seu valor éfalse. Option - autoHide Esta opção é usada para ocultar o ícone de ampliação ou alças, exceto quando o mouse está sobre o item. Por padrão, seu valor éfalse. Syntax `$( ".selector" ).resizable({ autoHide: true });`
7	cancelar Esta opção é usada para evitar o redimensionamento em elementos especificados. Por padrão, seu valor éinput,textarea,button,select,option. Option - cancel Esta opção é usada para evitar o redimensionamento em elementos especificados. Por padrão, seu valor éinput,textarea,button,select,option. Syntax `$( ".selector" ).resizable({ cancel: ".cancel" });`
8	contenção Esta opção é usada para restringir o redimensionamento de elementos dentro de um elemento ou região especificada. Por padrão, seu valor éfalse. Option - containment Esta opção é usada para restringir o redimensionamento de elementos dentro de um elemento ou região especificada. Por padrão, seu valor éfalse. Isso pode ser do tipo - Selector - Este tipo indica que o elemento redimensionável estará contido apenas no primeiro item da lista encontrada pelo seletor. Element- Este tipo indica qualquer elemento DOM. O elemento redimensionável estará contido na caixa delimitadora deste elemento. String- Os valores possíveis para este tipo são - pai e documento . Syntax `$( ".selector" ).resizable({ containment: "parent" });`
9	demora Esta opção é usada para definir a tolerância ou atraso em milissegundos. O redimensionamento ou deslocamento começará depois disso. Por padrão, seu valor é0. Option - delay Esta opção é usada para definir a tolerância ou atraso em milissegundos. O redimensionamento ou deslocamento começará depois disso. Por padrão, seu valor é0. Syntax `$( ".selector" ).resizable({ delay: 150 });`
10	Desativado Esta opção desativa o mecanismo de redimensionamento quando definida como verdadeira . O mouse não redimensiona mais os elementos, até que o mecanismo seja habilitado, usando o redimensionável ("habilitar"). Por padrão, seu valor éfalse. Option - disabled Esta opção desativa o mecanismo de redimensionamento quando definida como verdadeira . O mouse não redimensiona mais os elementos, até que o mecanismo seja habilitado, usando o redimensionável ("habilitar"). Por padrão, seu valor éfalse. Syntax `$( ".selector" ).resizable({ disabled: true });`
11	distância Com esta opção, o redimensionamento começa apenas quando o mouse se move uma distância (pixels). Por padrão, seu valor é1 pixel. Isso pode ajudar a evitar o redimensionamento não intencional ao clicar em um elemento. Option - distance Com esta opção, o redimensionamento começa apenas quando o mouse se move uma distância (pixels). Por padrão, seu valor é1 pixel. Isso pode ajudar a evitar o redimensionamento não intencional ao clicar em um elemento. Syntax `$( ".selector" ).resizable({ distance: 30 });`
12	fantasma Esta opção quando definida como verdadeira , um elemento auxiliar semitransparente é mostrado para redimensionamento. Este item fantasma será excluído quando o mouse for liberado. Por padrão, seu valor éfalse. Option - ghost Esta opção quando definida como verdadeira , um elemento auxiliar semitransparente é mostrado para redimensionamento. Este item fantasma será excluído quando o mouse for liberado. Por padrão, seu valor éfalse. Syntax `$( ".selector" ).resizable({ ghost: true });`
13	rede Esta opção é do tipo Array [x, y], indicando o número de pixels que o elemento expande horizontalmente e verticalmente durante o movimento do mouse. Por padrão, seu valor éfalse. Option - grid Esta opção é do tipo Array [x, y], indicando o número de pixels que o elemento expande horizontalmente e verticalmente durante o movimento do mouse. Por padrão, seu valor éfalse. Syntax `$( ".selector" ).resizable({ grid: [ 20, 10 ] });`
14	alças Esta opção é uma string de caracteres que indica quais lados ou ângulos do elemento podem ser redimensionados. Por padrão, seus valores sãoe, s, se. Option - handles Esta opção é uma string de caracteres que indica quais lados ou ângulos do elemento podem ser redimensionados. Os valores possíveis são: n, e, s e w para os quatro lados e ne, se, nw e sw para os quatro cantos. As letras n, e, s e w representam os quatro pontos cardeais (Norte, Sul, Leste e Oeste). Por padrão, seus valores são e, s, se. Syntax `$( ".selector" ).resizable({ handles: "n, e, s, w" });`
15	ajudante Esta opção é usada para adicionar uma classe CSS para definir o estilo do elemento a ser redimensionado. Quando o elemento é redimensionado, um novo elemento <div> é criado, que é dimensionado (classe ui-resizable-helper). Quando o redimensionamento estiver concluído, o elemento original é dimensionado e o elemento <div> desaparece. Por padrão, seu valor éfalse. Option - helper Esta opção é usada para adicionar uma classe CSS para definir o estilo do elemento a ser redimensionado. Quando o elemento é redimensionado, um novo elemento <div> é criado, que é dimensionado (classe ui-resizable-helper). Quando o redimensionamento estiver concluído, o elemento original é dimensionado e o elemento <div> desaparece. Por padrão, seu valor éfalse. Syntax `$( ".selector" ).resizable({ helper: "resizable-helper" });`
16	altura máxima Esta opção é usada para definir a altura máxima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor énull. Option - maxHeight Esta opção é usada para definir a altura máxima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor énull. Syntax `$( ".selector" ).resizable({ maxHeight: 300 });`
17	largura máxima Esta opção é usada para definir a largura máxima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor énull. Option - maxWidth Esta opção é usada para definir a largura máxima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor énull. Syntax `$( ".selector" ).resizable({ maxWidth: 300 });`
18	minHeight Esta opção é usada para definir a altura mínima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor é10. Option - minHeight Esta opção é usada para definir a altura mínima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor é10. Syntax `$( ".selector" ).resizable({ minHeight: 150 });`
19	minWidth Esta opção é usada para definir a largura mínima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor é10. Option - minWidth Esta opção é usada para definir a largura mínima para a qual o redimensionável deve ser redimensionado. Por padrão, seu valor é10. Isso pode ser do tipo - Syntax `$( ".selector" ).resizable({ minWidth: 150 });`

A seção a seguir mostrará alguns exemplos funcionais da funcionalidade de redimensionamento.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade redimensionável, sem passar parâmetros para o resizable() método.

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

Vamos salvar o código acima em um arquivo HTML resizeexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Arraste a borda quadrada para redimensionar.

Uso de animação e fantasma

O exemplo a seguir demonstra o uso de duas opções animate e ghost na função de redimensionamento do 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>

Vamos salvar o código acima em um arquivo HTML resizeexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Arraste a borda quadrada para redimensionar e ver o efeito das opções de animação e fantasma.

Uso de contenção, minHeight e minWidth

O exemplo a seguir demonstra o uso de três opções containment, minHeight e minWidth na função de redimensionamento do 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>

Arraste a borda quadrada para redimensionar, você não pode redimensionar além do contêiner principal.

Uso de atraso, distância e autoHide

O exemplo a seguir demonstra o uso de três opções delay, distance e autoHide na função de redimensionamento do 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>

Arraste a borda quadrada para redimensionar e você pode notar que -

A primeira caixa quadrada é redimensionada após um atraso de 1000 ms,
A segunda caixa quadrada começa a ser redimensionada depois que o mouse se move 40px.
Passe o mouse sobre a terceira caixa quadrada e o ícone de ampliação aparecerá.

Uso de alsoResize

O exemplo a seguir demonstra o uso da opção alsoResize na função de redimensionamento do 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>

Arraste a borda quadrada para redimensionar e você pode notar que a segunda caixa quadrada também é redimensionada com a primeira caixa quadrada.

Uso de AspectRatio, Grid

O exemplo a seguir demonstra o uso da opção aspectRatio e grid na função de redimensionamento do 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>

Arraste a borda quadrada para redimensionar, a primeira caixa quadrada é redimensionada com a proporção de aspecto de 10/3 e a segunda é redimensionada com grade de [50,20].

$ (seletor, contexto) .resizable ("ação", parâmetros) Método

O método redimensionável ("ação", parâmetros) pode executar uma ação em elementos redimensionáveis, como permitir ou impedir a funcionalidade de redimensionamento. A ação é especificada como uma string no primeiro argumento (por exemplo, "desativar" para evitar o redimensionamento). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -


$( ".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" );

Sr. Não.	Ação e descrição
1	destruir Esta ação destrói completamente a funcionalidade redimensionável de um elemento. Isso retornará o elemento de volta ao seu estado pré-inicialização. Action - destroy Essa ação destrói completamente a funcionalidade redimensionável de um elemento. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).resizable("destroy");`
2	desabilitar Esta ação desativa a funcionalidade de redimensionamento de um elemento. Este método não aceita nenhum argumento. Action - disable Esta ação desativa a funcionalidade de redimensionamento de um elemento. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).resizable("disable");`
3	habilitar Esta ação ativa a funcionalidade de redimensionamento de um elemento. Este método não aceita nenhum argumento. Action - enable Esta ação ativa a funcionalidade de redimensionamento de um elemento. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).resizable("enable");`
4	opção (optionName) Esta ação recupera o valor do optionName especificado . Esta opção corresponde a uma das usadas com redimensionável (opções). Action - option( optionName ) Esta ação recupera o valor do optionName especificado . Esta opção corresponde a uma das usadas com redimensionável (opções). Syntax `var isDisabled = $( ".selector" ).resizable( "option", "disabled" );`
5	opção() Obtém um objeto que contém pares de chave / valor que representam o hash de opções redimensionáveis atuais. Isso não aceita nenhum argumento. Action - option() Obtém um objeto que contém pares de chave / valor que representam o hash de opções redimensionáveis atuais. Isso não aceita nenhum argumento. Syntax `var options = $( ".selector" ).resizable( "option" );`
6	opção (optionName, value) Esta ação define o valor da opção redimensionável com o optionName especificado . Esta opção corresponde a uma das usadas com redimensionável (opções). Action - option( optionName, value ) Esta ação define o valor da opção redimensionável com o optionName especificado . Esta opção corresponde a uma das usadas com redimensionável (opções). Syntax `$( ".selector" ).resizable( "option", "disabled", true );`
7	opção (opções) Esta ação define uma ou mais opções para o redimensionável. Action - option( options ) Esta ação define uma ou mais opções para o redimensionável. Syntax `$( ".selector" ).resizable( "option", { disabled: true } );`
8	ferramenta() Esta ação retorna um objeto jQuery contendo o elemento redimensionável. Este método não aceita nenhum argumento. Action - widget() Esta ação retorna um objeto jQuery contendo o elemento redimensionável. Este método não aceita nenhum argumento. Syntax `var widget = $( ".selector" ).resizable( "widget" );`

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso dos métodos destroy () e 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>

Vamos salvar o código acima em um arquivo HTML resizeexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Você não pode redimensionar a primeira caixa quadrada porque está desativada e a segunda caixa quadrada é destruída.

Gerenciamento de eventos em elementos redimensionáveis

Além do método redimensionável (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não.	Método e descrição do evento
1	criar (evento, ui) Este evento é disparado quando o elemento redimensionável é criado. Event - create(event, ui) Este evento é disparado quando o elemento redimensionável é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Syntax `$( ".selector" ).resizable({ create: function( event, ui ) {} });`
2	redimensionar (evento, ui) Este evento é disparado quando o manipulador do elemento redimensionável é arrastado. Event - resize(event, ui) Este evento é disparado quando o manipulador do elemento redimensionável é arrastado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - element - Um objeto jQuery que representa o elemento redimensionável. helper - Um objeto jQuery que representa o auxiliar que está sendo redimensionado. originalElement - O objeto jQuery que representa o elemento original antes de ser empacotado. originalPosition - A posição representada como {esquerda, topo} antes que o redimensionável seja redimensionado. originalSize - O tamanho representado como {largura, altura} antes do redimensionável ser redimensionado. position - A posição atual representada como {esquerda, topo}. size - O tamanho atual representado como {largura, altura}. Syntax `$( ".selector" ).resizable({ resize: function( event, ui ) {} });`
3	início (evento, ui) Este evento é disparado no início de uma operação de redimensionamento. Event - start(event, ui) Este evento é disparado no início de uma operação de redimensionamento. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - element - Um objeto jQuery que representa o elemento redimensionável. helper - Um objeto jQuery que representa o auxiliar que está sendo redimensionado. originalElement - O objeto jQuery que representa o elemento original antes de ser empacotado. originalPosition - A posição representada como {esquerda, topo} antes que o redimensionável seja redimensionado. originalSize - O tamanho representado como {largura, altura} antes do redimensionável ser redimensionado. position - A posição atual representada como {esquerda, topo}. size - O tamanho atual representado como {largura, altura}. Syntax `$( ".selector" ).resizable({ start: function( event, ui ) {} });`
4	parar (evento, ui) Este evento é disparado no final de uma operação de redimensionamento. Event - stop(event, ui) Este evento é disparado no final de uma operação de redimensionamento. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - element - Um objeto jQuery que representa o elemento redimensionável. helper - Um objeto jQuery que representa o auxiliar que está sendo redimensionado. originalElement - O objeto jQuery que representa o elemento original antes de ser empacotado. originalPosition - A posição representada como {esquerda, topo} antes que o redimensionável seja redimensionado. originalSize - O tamanho representado como {largura, altura} antes do redimensionável ser redimensionado. position - A posição atual representada como {esquerda, topo}. size - O tamanho atual representado como {largura, altura}. Syntax `$( ".selector" ).resizable({ stop: function( event, ui ) {} });`

Exemplo

O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade de redimensionamento. Este exemplo demonstra o uso de eventos de criação e redimensionamento .

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

Vamos salvar o código acima em um arquivo HTML resizeexample.htm e abri-lo em um navegador padrão que suporte javascript, deve ver o seguinte resultado -

Arraste a caixa quadrada e você verá a saída sendo exibida no evento de redimensionamento.