In uno dei miei ultimi lavori, ho riscontrato un bug con l’utilizzo del framework jQuery, nella realizzazione di una galleria fotografica con effetto di scorrimento delle foto (slideshow photo gallery).
Ho perso diverse ore prima di capire che l’errore era dato dalla funzione jQuery position(), perché si verifica solo in determinate condizioni, ancora non del tutto chiare (forse dovute anche alla struttura della pagina HTML).
Tag: Jquery
jQuery: seleziona tutto (e deseleziona)
Spesse volte capita di realizzare delle form contenenti una serie di checkbox (per esempio un elenco delle nazioni), dove l’utente può selezionarne più d’una. Se l’elenco è molto lungo e l’utente ha necessità di selezionarle anche tutte, di solito si inseriscono un paio di pulsanti che permettono di fare una seleziona/deselezione di massa.
Con jQuery è molto semplice e basta una riga di codice.
Intanto costruiamo l’html:
<a href="javascript:selectAll()">seleziona tutto</a> | <a href="javascript:deselectAll()">Deseleziona tutto</a>
<div id="cont_nazioni">
<input type="checkbox" name="nazioni[]" value="IT">Italia<br />
<input type="checkbox" name="nazioni[]" value="FR">Francia<br />
....
<input type="checkbox" name="nazioni[]" value="DE">Germania<br />
<input type="checkbox" name="nazioni[]" value="ES">Spagna<br />
</div>
E poi le due funzioni Javascript per eseguire la selezione e la deselezione:
<script type="text/javascript">
function selectAll() {
$("#cont_nazioni :checkbox").attr({ checked: "checked"});
}
function deselectAll() {
$(“#cont_nazioni :checkbox”).removeAttr(“checked”);
}
</script>
Ovviamente per far funzionare il tutto ricordate di includere anche la classe jQuery.
Menù a tendina orizzontale e jQuery
Come promesso nell’ultimo post (ormai datato), oggi pubblico una versione modificata del menù proposto da Gianluca Troiani nel suo libro: ho praticamente sostituito lo script javascript che controlla l’apertura e chiusura delle tendine con una versione realizzata con jQuery.
Lo script può essere applicato sia alla versione con menù orizzontale, che per quella in verticale che ho modificato nel post precedente.
Il css e l’html della pagina è identico alla versione originale, ho solo aggiunto il seguente codice nel tag :
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”scripts/jquery.onfocus.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#menuNavigazione’).onfocus();
});
</script>
che si occupa di caricare la libreria jQuery e jquery.onfocus.js che ho sviluppato per gestire l’apertura/chiusura del menù.
Il javascript $(‘#menuNavigazione’).onfocus() si occupa di assegnare alla lista (ul) con id menuNavigazione la funzione onfocus.
La funzione onfocus è la seguente:
(function() {
$.fn.onfocus = function(){$(this).find(“ul”).removeClass().addClass(“subMenu-off”);
$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});
};
})(jQuery);
Passo 1:
$(this).find(“ul”).removeClass().addClass(“subMenu-off”);
associa a tutte le sottoliste dell’oggetto this lo stile subMenu-off per nascondere i sottomenù; questa procedura è migliore rispetto a quella proposta da Gianluca, perché jQuery esegue il javascript mentre la pagina si sta caricando, mentre l’altra versione attende che venga completato il caricamento di tutto l’HTML. In questo modo si evita uno sfarfallio iniziale dei sottomenù che ho notato in firefox sotto linux o su PC più datati.
Passo 2:
$(this).find(“li”).focus = $(this).find(“li”).mouseover(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-on”);
});
se si passa con il mouse (o al focus) sopra un tag li della lista rimuove lo stile subMenu-off e aggiunge subMenu-on ai tag ul presenti all’interno di li.
Passo 3:
$(this).find(“li”).mouseout(function() {
$(this).children(“ul”).removeClass().addClass(“subMenu-off”);
});
esegue l’operazione opposta del passo 2: quando si verifica l’evento mouseout, riassegna ai tag ul presenti all’interno di li la classe subMenu-off.
In jquery_menu_orizzontale.zip l’esempio completo.