jQuery italia

Resize Stampa E-mail
Pagina 1 di 2

 

Questo plugin delle jQuery UI serve per rendere ridimensionabile un elemento, ovvero è possibile variarne l'altezza e/o la larghezza

Le classi interessate da questo plugin sono 5:

  • ui-helper: il contenitore dell'elemento da ridimensionare;
  • ui-originalPosition: posizione originale prima del ridimensionamento ( {top: .. ; left: .. ;} );
  • ui-originalSize: dimensioni originali prima del ridimensionamento ( {width: .. ; height: .. ;} );
  • ui-position: posizione attuale ( {top: .. ; left: .. ;} );
  • ui-size: dimensioni attuali ( { width: .. , height: .. ;).

Vediamo ora un esempio di questo plugin ed il codice che ci permette di realizzarlo:

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

 

Il plugin come al solito può essere modificato tramite eventi, metodi ed opzioni generali.
Di seguito tratteremo questi tre metodi separatamente.

 

 

Eventi

Vediamo ora gli eventi che permettono di evidenziare le fasi più importanti del nostro plugin.

 

Start

Questo evento è generato quando si comincia l'operazione di ridimensionamento.
Possiamo quindi legare a questo evento una funzione a nostro piacere, oppure utilizzare il metodo ".bind()" per legare la funzione al relativo tipo, in questo caso "resizestart".
Ecco il codice di esempio di entrambi i casi:

 

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

$('.selector').bind('resizestart', function(event, ui) {
...
});

Resize

Evento che si genera quando si sta ridimensionando l'elemento.
Anche qui come per l'evento precedente possiamo avere i due casi di utilizzo e la sintassi è analoga:

 

$('.selector').resizable({
   resize: function(event, ui) { ... }
});


$('.selector').bind('resize', function(event, ui) {
  ...
});

Stop

Questo evento invece indica quando l'operazione di resize è terminata.
Anche qui la sintassi è analoga alla precedente:

 

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




$('#id').bind('dropover', function(event, ui) {
  ...
});

Out

Evento opposto al precedente, ovvero quando l'elemento è fatto "uscire" dall'elemento drop.
Anche qui la sintassi è analoga alla precedente:

 

$('#id').droppable({
   out: function(event, ui) { ... }
});


$('.selector').bind('resizestop', function(event, ui) {
  ...
});
Tramite questi eventi, anche se semplici, è possibile catturare tutte le varie fasi che operano nel cambiamento di dimensioni dell'elemento in questione.

 

 


<< Inizio < Prec. 1 2 Succ. > Fine >>
 

Chi è online

 17 visitatori online

Sondaggi

Che cosa pensi della grafica di questo sito ?