MICHELEPISANI.IT

jQuery UI: guida all'uso delle interazioni

Modificare la dimensione degli elementi con il mouse

Ridimensionare elementi con jQuery UI Resizable

Febbraio 12
07:272015

Il ridimensionamento degli elementi è utile in molti contesti e può trovare spazio nelle più disparate applicazioni web, a maggior ragione se esso può essere effettuato in tempo reale, basti pensare ad una serie di contenitori che al cui interno presentano diversi elementi ma che, alcuni di essi, disposti su un'ipotetica dashboard occupano troppo spazio rispetto a quello di cui hanno effettivamente bisogno. In questo caso il loro ridimensionamento ad hoc (meglio se associato ad un seguente update delle dimensioni per mantenere costanti le modifiche anche per usi successivi) può aiutare ad ottimizzare lo spazio a disposizione.
L'obiettivo si raggiunge assegnando il metodo "resizable" ad un elemento del DOM, di conseguenza questo assumerà la capacità di essere ridimensionabile tramite trascinamento.

Il primo passo è quello di inludere le librerie jQuery e jQuery UI tra i tag head:

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

Successivamente identificare l'elemento a cui associare la funzionalità, nel caso specifico utilizzo un'immagine (che per semplicità creo dinamicamente tramite un apposito servizio) ma potrebbe essere ad esempio anche un "div":

<img class="element" src="http://dummyimage.com/150x150/ddd/000&text=Ridimensionami" />

Ed infine associare il metodo all'elemento:

$(function() {
    $(".element").resizable({
        aspectRatio: true,
        minWidth: 50,
        maxHeight:250
    });
});

Nel codice di cui sopra ho inserito, a titolo esemplificativo, alcune opzioni aggiuntive tra cui "aspectRatio" per mantenere le proporzioni dell'elemento durante il ridimensionamento e i valori relativi alle dimensioni minime e massime che l'elemento può assumere.

Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":

Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget resizable sul sito di jQueryUI.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …