Il framework JavaScript jQuery mette a disposizione il metodo clone(), grazie al quale sarà possibile duplicare porzioni di codice HTML all’interno di una pagina Web senza la necessità di un ulteriore caricamento; nel caso specifico di questo post cloneremo un div box e il suo contenuto e creeremo i pulsanti per la clonazione e per il reset delle modifiche. Cominciamo subito con le regole di stile da associare al div destinato alla duplicazione.
<style type="text/css">
#contenitore{
margin:4px;
padding:4px;
border:1px dashed #ccc;
}
</style>
Fatto questo, dopo aver effettuato la nostra inclusione di jQuery tra i tag “head”, andremo ad inserire le tre componenti richieste dalla nostra piccola applicazione:
<div id="contenitore">Contenuto</div> <p> <button id="clona">Clona</button> <button id="reset">Annulla</button> </p>
Avremo così un div clonabile (“Contenitore”), un pulsante che richiama il metodo “clone()” e un secondo tasto per il reset riferito al metodo omonimo; non ci resterà quindi che completare l’opera definendo le funzioni necessarie:
<script type="text/javascript">
$("#clona").click(function () {
$('#contenitore').clone(false).insertAfter('#contenitore');
});
$("#reset").click(function () {
location.reload();
});
</script>
Per vostra comodità posterò il codice completo pronto per i test:
<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#contenitore{
margin:4px;
padding:4px;
border:1px dashed #ccc;
}
</style>
</head>
<body>
<div id="contenitore">Contenuto</div>
<p>
<button id="clona">Clona</button>
<button id="reset">Annulla</button>
</p>
<script type="text/javascript">
$("#clona").click(function () {
$('#contenitore').clone(false).insertAfter('#contenitore');
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
Utilizzate e modificate il sorgente proposto per i vostri progetti, ma tenete conto di una raccomandazione: nel caso specifico l’elemento clonabile (il “div” dell’esempio) deve essere associato ad un id e non ad una classe, diversamente la clonazione sarà unitaria soltanto dopo il primo click del pulsante, successivamente sarà esponenziale.
Questo perché molto probabilmente a voi interesserà generare un solo duplicato per ogni click.
