Script javascript: Textarea ridimensionabile con jquery

   difficoltà:  script script script script script

Script simili
27/10/2008


Vediamo come creare molto facilmente una textarea ridimensionabile con jquery. Basterà usare jquery e la libreria jquery.ui e in poche righe avremo la nostra textarea resizable.

Fortunatamente tra l'altro sia jquery che jquery.ui sono librerie hostate sui server di google, per cui non dovremo ne scaricarle ne tantomeno far caricare le librerie dai nostri server (con un bel risparmio di banda);

Includeremo quindi le librerie a inizio script utilizzando le api ajax di google vedi spiegazione nell'articolo:
Script ajax: Caricare librerie ajax dai veloci server di google:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.load("jqueryui", "1.5.2");
</script>

Vediamo ora lo script completo:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.load("jqueryui", "1.5.2");
</script>
<script>
$(document).ready(function() {
$("#resizebleTextarea").resizable({
handles: "e,s",
minWidth: 200,
minHeight: 100,
maxWidth: 400,
maxHeight: 400
});
});
</script>

<textarea id="resizebleTextarea">Contenuto textarea ridimensionabile</textarea>

Basterà semplicente settare le proprietà come desiderate:
handles: accetta: all,n,s,e,w identifica i lati della textarea che sarà possibile spostare per ridimensionarla. Stanno per: tutti, nord, sud, est, ovest. Si possono indicare più lati separandoli da virgola. Nel mio caso voglio solo spostare il lato destro e quello sotto(est e sud).
minWidth, minHeigh, maxWidth, maxHeight: sono l'altezza e la larghezza minima e quelle massime in pixel. Se mettiamo minWidth e maxWidth uguali potremo solo allungare la textarea senza variare la larghezza.
Per altre opzioni vedere:

http://ui.jquery.com/repository/latest/demos/functional/#ui.resizable





Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.