Vediamo un’altra possibilità, abbastanza elegante di aggiungere, o togliere, elementi dalla nostra pagina html.
Useremo le funzioni attach e detach di jQuery. Innenazitutto inseriamo nella nostra pagina i tag html protagonisti del tutorial:
[soucecode language=”html”]
<body class=”detaching”>
<div>
<button class=”attach”>Attach</button>
<button class=”detach”>Detach</button>
<span>Elemento contenuto</span>
</div>
[/sourcecode]
si noti le classi attach e detach nei bottoni e la classe detching nel tag body. Quest’ultima classe servirà per nascondere il bottone inutile.
[soucecode language=”css”]
<style>
.detaching button.attach {display: none;}
.attaching button.detach {display: none;}
</style>
[/sourcecode]
Al caricamento della pagina risulta nascosto il bottone attach, del resto l’elemento sarà già visibile e quindi verrà prima rimosso, si noti rimosso, non nascosto.
Lo script funzionerà in questo modo: al document.ready faremo il bind del click su ciascun bottone e procederemo con il detach() ovvero l’attach dell’elemento span presente nella pagina. Interessante la catena di selezioni: il click e su this oggetto del binding, risaliamo al parent, cioè il div e fra i suoi figli (children) cerchiamo il primo span (span:first) e lo rimuoviamo dalla pagina. L’attach è più semplice poiché è sufficiente poiché basta fare un appendTo().
Sarebbe finita qui se non si dovesse nascondere il bottone utilizzato e mostrare l’altro: questa operazione la facciamo modificando la classe del body, rimuovendo la vecchia e mettendo la nuova, cambiando quindi il slettore css attivo:
[soucecode language=”javascript”]
$(document).ready(function() {
var el;
$(‘.detach’).click(function() {
el = $(this).parent().children(‘span:first’).remove();
$(‘body’).removeClass(‘detaching’).addClass(‘attaching’);
});
$(‘.attach’).click(function() {
el.appendTo($(this).parent());
$(‘body’).removeClass(‘attaching’).addClass(‘detaching’);
});
});
[/sourcecode]
L’esempio
Sorry, the comment form is closed at this time.