JqueryUI - Ridimensionabile

jQueryUI fornisce il metodo resizable () per ridimensionare qualsiasi elemento DOM. Questo metodo semplifica il ridimensionamento dell'elemento che altrimenti richiede tempo e molta codifica in HTML. Il metodo resizable () visualizza un'icona in basso a destra dell'elemento da ridimensionare.

Sintassi

Il resizable() metodo può essere utilizzato in due forme:

$ (selettore, contesto) .resizable (opzioni) Metodo

Il metodo resizable (opzioni) dichiara che un elemento HTML può essere ridimensionato. Il parametro options è un oggetto che specifica il comportamento degli elementi coinvolti durante il ridimensionamento.

Sintassi

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

È possibile fornire una o più opzioni contemporaneamente per l'utilizzo dell'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 alsoResize

Questa opzione è di tipo Selector , jQuery o qualsiasi elemento DOM . Rappresenta gli elementi che si ridimensionano anche quando si ridimensiona l'oggetto originale. Per impostazione predefinita, il suo valore èfalse.

Option - alsoResize

Questa opzione può essere di tipo Selector , jQuery o qualsiasi elemento DOM . Rappresenta gli elementi che si ridimensionano anche quando si ridimensiona l'oggetto originale. Per impostazione predefinita, il suo valore èfalse.

Questo può essere di tipo -

  • Selector - Questo tipo indica gli elementi DOM da selezionare da un documento DOM per il ridimensionamento.

  • jQuery- Una funzione di callback verrà chiamata per ogni elemento ridimensionabile sulla pagina. Questa funzione dovrebbe restituire true se l'elemento viene ridimensionato.

  • Element - Un elemento nel Document Object Model (DOM).

Syntax

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

Questa opzione se impostata su trueviene utilizzato per abilitare un effetto visivo durante il ridimensionamento quando il pulsante del mouse viene rilasciato. Il valore predefinito èfalse (nessun effetto).

Option - animate

Questa opzione se impostata su trueviene utilizzato per abilitare un effetto visivo durante il ridimensionamento quando il pulsante del mouse viene rilasciato. Il valore predefinito èfalse (nessun effetto).

Syntax

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

Questa opzione viene utilizzata per impostare la durata (in millisecondi) dell'effetto di ridimensionamento. Questa opzione viene utilizzata solo quandoanimatel'opzione è vera . Per impostazione predefinita, il suo valore è"slow".

Option - animateDuration

Questa opzione viene utilizzata per impostare la durata (in millisecondi) dell'effetto di ridimensionamento. Questa opzione viene utilizzata solo quandoanimatel'opzione è vera . Per impostazione predefinita, il suo valore è"slow".

Questo può essere di tipo -

  • Number - Specifica la durata in millisecondi

  • String - Questo specifica la durata denominata, come "lento" o "veloce".

Syntax

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

Questa opzione viene utilizzata per specificare quale andamento applicare quando si utilizza l'estensioneanimateopzione. Per impostazione predefinita, il suo valore è"swing".

Option - animateEasing

Questa opzione viene utilizzata per specificare quale andamento applicare quando si utilizza l'estensioneanimateopzione. Per impostazione predefinita, il suo valore è"swing".

Le funzioni di andamento specificano la velocità con cui un'animazione avanza in diversi punti all'interno dell'animazione.

Syntax

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

Questa opzione viene utilizzata per indicare se mantenere il rapporto di aspetto (altezza e larghezza) per l'elemento. Per impostazione predefinita, il suo valore èfalse.

Option - aspectRatio

Questa opzione viene utilizzata per indicare se mantenere il rapporto di aspetto (altezza e larghezza) per l'elemento. Per impostazione predefinita, il suo valore èfalse.

Questo può essere di tipo -

  • Boolean- Questo valore se impostato su true , l'elemento manterrà le sue proporzioni originali.

  • Number - Questo specifica l'elemento per mantenere un rapporto di aspetto specifico durante il ridimensionamento.

Syntax

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

Questa opzione viene utilizzata per nascondere l'icona o le maniglie di ingrandimento, tranne quando il mouse si trova sopra l'elemento. Per impostazione predefinita, il suo valore èfalse.

Option - autoHide

Questa opzione viene utilizzata per nascondere l'icona o le maniglie di ingrandimento, tranne quando il mouse si trova sopra l'elemento. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione viene utilizzata per impedire il ridimensionamento su elementi specificati. Per impostazione predefinita, il suo valore èinput,textarea,button,select,option.

Option - cancel

Questa opzione viene utilizzata per impedire il ridimensionamento su elementi specificati. Per impostazione predefinita, il suo valore èinput,textarea,button,select,option.

Syntax

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

Questa opzione viene utilizzata per limitare il ridimensionamento degli elementi all'interno di un elemento o di una regione specificati. Per impostazione predefinita, il suo valore èfalse.

Option - containment

Questa opzione viene utilizzata per limitare il ridimensionamento degli elementi all'interno di un elemento o di una regione specificati. Per impostazione predefinita, il suo valore èfalse.

Questo può essere di tipo -

  • Selector - Questo tipo indica che l'elemento ridimensionabile sarà contenuto solo nel primo elemento nell'elenco trovato dal selettore.

  • Element- Questo tipo indica qualsiasi elemento DOM. L'elemento ridimensionabile sarà contenuto nel riquadro di delimitazione di questo elemento.

  • String- I valori possibili per questo tipo sono: parent e document .

Syntax

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

Questa opzione viene utilizzata per impostare la tolleranza o il ritardo in millisecondi. Successivamente inizierà il ridimensionamento o lo spostamento. Per impostazione predefinita, il suo valore è0.

Option - delay

Questa opzione viene utilizzata per impostare la tolleranza o il ritardo in millisecondi. Successivamente inizierà il ridimensionamento o lo spostamento. Per impostazione predefinita, il suo valore è0.

Syntax

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

Questa opzione disabilita il meccanismo di ridimensionamento quando è impostata su true . Il mouse non ridimensiona più gli elementi, finché il meccanismo non viene abilitato, utilizzando il ridimensionabile ("abilita"). Per impostazione predefinita, il suo valore èfalse.

Option - disabled

Questa opzione disabilita il meccanismo di ridimensionamento quando è impostata su true . Il mouse non ridimensiona più gli elementi, finché il meccanismo non viene abilitato, utilizzando il ridimensionabile ("abilita"). Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Con questa opzione, il ridimensionamento inizia solo quando il mouse si sposta di una distanza (pixel). Per impostazione predefinita, il suo valore è1 pixel. Questo può aiutare a prevenire il ridimensionamento involontario quando si fa clic su un elemento.

Option - distance

Con questa opzione, il ridimensionamento inizia solo quando il mouse si sposta di una distanza (pixel). Per impostazione predefinita, il suo valore è1 pixel. Questo può aiutare a prevenire il ridimensionamento involontario quando si fa clic su un elemento.

Syntax

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

Questa opzione quando è impostata su true , viene mostrato un elemento helper semitrasparente per il ridimensionamento. Questo oggetto fantasma verrà eliminato quando il mouse viene rilasciato. Per impostazione predefinita, il suo valore èfalse.

Option - ghost

Questa opzione quando è impostata su true , viene mostrato un elemento helper semitrasparente per il ridimensionamento. Questo oggetto fantasma verrà eliminato quando il mouse viene rilasciato. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione è di tipo Array [x, y], che indica il numero di pixel che l'elemento espande orizzontalmente e verticalmente durante il movimento del mouse. Per impostazione predefinita, il suo valore èfalse.

Option - grid

Questa opzione è di tipo Array [x, y], che indica il numero di pixel che l'elemento espande orizzontalmente e verticalmente durante il movimento del mouse. Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione è una stringa di caratteri che indica quali lati o angoli dell'elemento possono essere ridimensionati. Per impostazione predefinita i suoi valori sonoe, s, se.

Option - handles

Questa opzione è una stringa di caratteri che indica quali lati o angoli dell'elemento possono essere ridimensionati. I valori possibili sono: n, e, s e w per i quattro lati e ne, se, nw e sw per i quattro angoli. Le lettere n, e, s e w rappresentano i quattro punti cardinali (Nord, Sud, Est e Ovest).

Per impostazione predefinita i suoi valori sono e, s, se.

Syntax

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

Questa opzione viene utilizzata per aggiungere una classe CSS per definire lo stile dell'elemento da ridimensionare. Quando l'elemento viene ridimensionato, viene creato un nuovo elemento <div>, che è quello ridimensionato (classe ui-resizable-helper). Una volta completato il ridimensionamento, l'elemento originale viene ridimensionato e l'elemento <div> scompare. Per impostazione predefinita, il suo valore èfalse.

Option - helper

Questa opzione viene utilizzata per aggiungere una classe CSS per definire lo stile dell'elemento da ridimensionare. Quando l'elemento viene ridimensionato, viene creato un nuovo elemento <div>, che è quello ridimensionato (classe ui-resizable-helper). Una volta completato il ridimensionamento, l'elemento originale viene ridimensionato e l'elemento <div> scompare. Per impostazione predefinita, il suo valore èfalse.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 altezza massima

Questa opzione viene utilizzata per impostare l'altezza massima a cui deve essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore ènull.

Option - maxHeight

Questa opzione viene utilizzata per impostare l'altezza massima a cui deve essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore ènull.

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });
17 larghezza massima

Questa opzione viene utilizzata per impostare la larghezza massima a cui dovrebbe essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore ènull.

Option - maxWidth

Questa opzione viene utilizzata per impostare la larghezza massima a cui dovrebbe essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore ènull.

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });
18 minHeight

Questa opzione viene utilizzata per impostare l'altezza minima a cui dovrebbe essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore è10.

Option - minHeight

Questa opzione viene utilizzata per impostare l'altezza minima a cui dovrebbe essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore è10.

Syntax

$( ".selector" ).resizable({ minHeight: 150 });
19 minWidth

Questa opzione viene utilizzata per impostare la larghezza minima a cui deve essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore è10.

Option - minWidth

Questa opzione viene utilizzata per impostare la larghezza minima a cui deve essere consentito il ridimensionamento. Per impostazione predefinita, il suo valore è10.

Questo può essere di tipo -

Syntax

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

La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità di ridimensionamento.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità ridimensionabile, senza passare parametri al file resizable() metodo.

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

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare.

Uso di animato e fantasma

L'esempio seguente mostra l'utilizzo di due opzioni animate e ghost nella funzione di ridimensionamento di 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>

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare e vedere l'effetto delle opzioni di animazione e fantasma.

Uso di contenimento, minHeight e minWidth

Il seguente esempio dimostra l'utilizzo di tre opzioni containment, minHeight e minWidth nella funzione di ridimensionamento di 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>

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare, non puoi ridimensionare oltre il contenitore principale.

Uso di ritardo, distanza e autoHide

Il seguente esempio dimostra l'utilizzo di tre opzioni delay, distance e autoHide nella funzione di ridimensionamento di 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>

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare e puoi notare che:

  • La prima casella quadrata si ridimensiona dopo un ritardo di 1000 ms,

  • La seconda casella quadrata inizia a ridimensionarsi dopo che il mouse si sposta di 40 px.

  • Passa il mouse sulla terza casella quadrata e appare l'icona di ingrandimento.

Uso di alsoResize

Il seguente esempio dimostra l'utilizzo di option alsoResize nella funzione di ridimensionamento di 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>

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare e puoi notare che anche la seconda casella quadrata si ridimensiona con la prima casella quadrata.

Uso di AspectRatio, Grid

Il seguente esempio dimostra l'utilizzo di option aspectRatio e grid nella funzione di ridimensionamento di 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>

Salviamo il codice sopra in un file HTML resizeexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Trascina il bordo quadrato per ridimensionare, il primo riquadro quadrato si ridimensiona con le proporzioni di 10/3 e il secondo si ridimensiona con la griglia di [50,20].

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

Il metodo ridimensionabile ("azione", params) può eseguire un'azione sugli elementi ridimensionabili, ad esempio consentire o impedire la funzionalità di ridimensionamento. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disabilita" per impedire il ridimensionamento). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

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

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:

Sr.No. Azione e descrizione
1 distruggere

Questa azione distrugge completamente la funzionalità ridimensionabile di un elemento. Questo riporterà l'elemento al suo stato pre-inizializzazione.

Action - destroy

Questa azione distrugge completamente la funzionalità ridimensionabile di un elemento. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti.

Syntax

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

Questa azione disabilita la funzionalità di ridimensionamento di un elemento. Questo metodo non accetta argomenti.

Action - disable

Questa azione disabilita la funzionalità di ridimensionamento di un elemento. Questo metodo non accetta argomenti.

Syntax

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

Questa azione abilita la funzionalità di ridimensionamento di un elemento. Questo metodo non accetta argomenti.

Action - enable

Questa azione abilita la funzionalità di ridimensionamento di un elemento. Questo metodo non accetta argomenti.

Syntax

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

Questa azione recupera il valore dell'opzione optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con ridimensionabile (opzioni).

Action - option( optionName )

Questa azione recupera il valore dell'opzione optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con ridimensionabile (opzioni).

Syntax

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

Ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni ridimensionabili corrente. Questo non accetta argomenti.

Action - option()

Ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni ridimensionabili corrente. Questo non accetta argomenti.

Syntax

var options = $( ".selector" ).resizable( "option" );
6 opzione (optionName, value)

Questa azione imposta il valore dell'opzione ridimensionabile con optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con ridimensionabile (opzioni).

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione ridimensionabile con optionName specificato . Questa opzione corrisponde a una di quelle utilizzate con ridimensionabile (opzioni).

Syntax

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

Questa azione imposta una o più opzioni per il ridimensionabile.

Action - option( options )

Questa azione imposta una o più opzioni per il ridimensionabile.

Syntax

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

Questa azione restituisce un oggetto jQuery contenente l'elemento ridimensionabile. Questo metodo non accetta argomenti.

Action - widget()

Questa azione restituisce un oggetto jQuery contenente l'elemento ridimensionabile. Questo metodo non accetta argomenti.

Syntax

var widget = $( ".selector" ).resizable( "widget" );

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso dei metodi 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>

Salviamo il codice sopra in un file HTML resizeexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Non è possibile ridimensionare la prima casella quadrata poiché è disabilitata e la seconda casella quadrata viene distrutta.

Gestione eventi su elementi ridimensionabili

Oltre al metodo ridimensionabile (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati ​​per un particolare evento. Questi metodi di evento sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 create (evento, ui)

Questo evento viene attivato quando viene creato l'elemento ridimensionabile.

Event - create(event, ui)

Questo evento viene attivato quando viene creato l'elemento ridimensionabile. Dove event è di tipo Event e ui è di tipo Object .

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 ridimensiona (evento, ui)

Questo evento viene attivato quando il gestore dell'elemento ridimensionabile viene trascinato.

Event - resize(event, ui)

Questo evento viene attivato quando il gestore dell'elemento ridimensionabile viene trascinato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • element - Un oggetto jQuery che rappresenta l'elemento ridimensionabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene ridimensionato.

  • originalElement - L'oggetto jQuery che rappresenta l'elemento originale prima che venga eseguito il wrapping.

  • originalPosition - La posizione rappresentata come {sinistra, in alto} prima che il ridimensionabile venga ridimensionato.

  • originalSize - La dimensione rappresentata come {larghezza, altezza} prima che il ridimensionabile venga ridimensionato.

  • position - La posizione corrente rappresentata come {sinistra, in alto}.

  • size - La dimensione corrente rappresentata come {larghezza, altezza}.

Syntax

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 inizio (evento, ui)

Questo evento viene attivato all'inizio di un'operazione di ridimensionamento.

Event - start(event, ui)

Questo evento viene attivato all'inizio di un'operazione di ridimensionamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • element - Un oggetto jQuery che rappresenta l'elemento ridimensionabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene ridimensionato.

  • originalElement - L'oggetto jQuery che rappresenta l'elemento originale prima che venga eseguito il wrapping.

  • originalPosition - La posizione rappresentata come {sinistra, in alto} prima che il ridimensionabile venga ridimensionato.

  • originalSize - La dimensione rappresentata come {larghezza, altezza} prima che il ridimensionabile venga ridimensionato.

  • position - La posizione corrente rappresentata come {sinistra, in alto}.

  • size - La dimensione corrente rappresentata come {larghezza, altezza}.

Syntax

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

Questo evento viene attivato alla fine di un'operazione di ridimensionamento.

Event - stop(event, ui)

Questo evento viene attivato alla fine di un'operazione di ridimensionamento. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • element - Un oggetto jQuery che rappresenta l'elemento ridimensionabile.

  • helper - Un oggetto jQuery che rappresenta l'helper che viene ridimensionato.

  • originalElement - L'oggetto jQuery che rappresenta l'elemento originale prima che venga eseguito il wrapping.

  • originalPosition - La posizione rappresentata come {sinistra, in alto} prima che il ridimensionabile venga ridimensionato.

  • originalSize - La dimensione rappresentata come {larghezza, altezza} prima che il ridimensionabile venga ridimensionato.

  • position - La posizione corrente rappresentata come {sinistra, in alto}.

  • size - La dimensione corrente rappresentata come {larghezza, altezza}.

Syntax

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

Esempio

L'esempio seguente mostra l'utilizzo del metodo dell'evento durante la funzionalità di ridimensionamento. Questo esempio dimostra l'uso di eventi create e 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>

Salviamo il codice sopra in un file HTML resizeexample.htm e aprirlo in un browser standard che supporta javascript, dovrebbe vedere il seguente output -

Trascina la casella quadrata e vedrai l'output che viene visualizzato all'evento di ridimensionamento.