jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!

Giacomo Paita — Sun, 30 May 2010 14:51:25 +0000

jQuery si dimostra molto utile per per tutti gli sviluppatori e i web designer che vogliano dare maggiore usabilità e flessibilità a ogni progetto web che stanno seguendo. Questo framework si rivela straordinario sia per i progetti di grosse dimensioni, sia per i siti più modesti.

Di seguito sono riportati alcuni piccoli trucchi e consigli molto utili, raccolti da varie fonti in Internet, che permettono di migliorare l’interazione dell’utente e di risolvere alcune problematiche in modo semplice ed efficace, anche per i webdesigner meno esperti e gli sviluppatori principianti. Dal momento che questi esempi sono incentrati su jQuery, il codice proposto non entra nei dettagli dei CSS.

CSS diversi per browser diversi

Ecco come dichiarare codice JavaScript per browser specifici:

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie && $.browser.version <= 6 ){
     // fai questo e quello
   }
});

//Target Safari
  if( $.browser.safari )
//Target IE6+
  if ($.browser.msie && $.browser.version > 6 )
//Target IE6 e precedenti
  if ($.browser.msie && $.browser.version <= 6 )
//Target Firefox 2 e successivi
  if ($.browser.mozilla && $.browser.version >= "1.8" )

Disabilitare il tasto destro del mouse dal menu contestuale

Ci sono molti frammenti JavaScript disponibili per disattivare il tasto destro del mouse dal menu contestuale, ma jQuery rende le cose molto più facili:

$(document).bind("contextmenu",function(e){
	return false;
 });

Verifichiamo che un elemento esista in jQuery…

if ($('#id').length) {
 // fai questo e quello
 }

…per caricare un plugin solo quando serve!

Quando il lavoro su un determinato sito cresce, gli script esterni iniziano ad accumularsi nella sezione del documento, e alla fine ciò impatta sulle prestazioni.
Grazie al metodo $.getScript, ecco una soluzione elegante a questo problema.

if ($('a.email').length > 0){
	$.getScript('js/jquery.mailto.js',function(){
		$('a.email').mailto();
	});
}

Eseguire solo ciò che serve veramente

Ogni programmatore/webdesigner per comodità di solito scrive tutto il codice JS per il sito web in un unico file.
jQuery però impiega tempo per cercare gli elementi nella pagina, anche se non esistono, e questo rallenta le cose. Ci sono due modi con cui è possibile aggirare questa situazione terribile. Quella più semplice è quello mettere un ID al tag body (il nome della pagina, ad esempio) ed eseguire il codice necessario per quell’unica pagina:

$(document).ready (function () {
	if ('body').hasClass ('home') {
  // codice per home page}else if ('body').hasClass ('blog') {
  // codice per la pagina blog
}
// e così via
});

Modalità non conflittuale

Per evitare conflitti quando si utilizzano più framework in un sito web, è possibile utilizzare questo Metodo jQuery, e assegnare un nome diverso alla variabile invece che il segno di dollaro. Ecco tutte le informazioni per utilizzare jQuery con altre librerie.

var $j = jQuery.noConflict();
$j('#mioDiv').hide();

Aggiungere un’icona per link diversi

Questo trucco è molto semplice e utile per l’usabilità. Se i link portano a siti Web esterni, vogliamo che una immagine venga visualizzata accanto al link, così come se sono presenti link a documenti .pdf, o .doc. Dopo aver definito delle regole CSS per ogni tipo di collegamento, associamole ai link corrispondenti:

// Link a pdf
		$("a[href$='.pdf']").addClass("pdf");
// Link a documenti (doc, rtf, txt)
		$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
// Link ad archivi compressi (zip, rar)
		$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
// Email link
		$("a[href^='mailto:']").addClass("email");
//Aggiungiamo uno stile per i link esterni:
		$('a').filter(function() {
//Compariamo l'host name nell'anchor tag con 's host name location
		return this.hostname && this.hostname !== location.hostname;
    }).addClass("external");
//Possimao anche aggiungere l'attributo _blank al terget dei link esterni:
/*
	$('a').filter(function() {
  //Compariamo l'host name nell'anchor tag con 's host name location
  	return this.hostname && this.hostname !== location.hostname;
    }).addClass("external").attr("target", "_blank");
*/

Applicare un effetto hover a qualsiasi elemento

$('#hover-demo2 p').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

Rendere cliccabile qualsiasi elemento

Vogliamo rendere cliccabile qualsiasi elemento (attenzione: il nostro HTML non sarà più validato!):


	Contenuto del div

Ecco come fare:

$("div.clickable").click(
function()
	{
  window.location = $(this).attr("url");
});

Imparare ad usare correttamente le animazioni

Il metodo animate() prende semplicemente qualsiasi stile CSS e lo fa passare in modo fluido da un valore all’altro. Quindi, è possibile modificare width, height, opacity, background-color, top, left, margin, color, font-size tutto quello che accetta un valore numerico. Ecco per esempio come è facile animare tutte le voci di un menù facendole crescere a 100 pixel di altezza quando si passa sopra il mouse:

$('#miaLista li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
});

A differenza di altre funzioni jQuery, le animazioni sono automaticamente eseguite in coda, quindi se si desidera eseguire una seconda animazione una volta che la prima è finita, basta chiamare il metodo animate() per due volte, senza funzioni di callback ulteriori:

$('#mioBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
   $(this).animate({"height": 200}, "slow");
});

Se si desidera che le animazioni avvengano in concomitanza, basta mettere entrambi gli stili nei parametri di una singola chiamata, così:

$('#mioBox').mouseover(function() {
	$(this).animate({ "width": 200, "height": 200 }, "slow");
});

È possibile animare qualsiasi proprietà che sia numerica. È però possibile scaricare un plugin per animare le proprietà che non sono numeriche, come i colori.

Shorthand per l’evento ready

Ecco un piccolo trucco che permette di salvare alcuni caratteri utilizzando una scorciatoia per la $(document).ready(function(){}).
Invece di:

$(document).ready(function (){
	// codice da eseguire
});

…possiamo scrivere:

$(function (){
	// codice da eseguire
});

Scorrere fino alla parte superiore di una pagina web

Per tornare a inizio pagina in modo fluido utilizzando le animazioni di jQuery, inseriamo questo codice HTML in pagina:

Torna a inizio pagina

…e settiamo l’animazione così:

$('a[href=#top]').click(function(){
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
});

…oppure possiamo realizzare lo stesso scroll animato con jQuery tramite una funzione a cui passiamo come parametro l’ id del selettore desiderato:

function scrollWin(anc){
	target = $(anc);
	$('html, body').animate({
		scrollTop: target.offset().top
	}, 1000);
}
$(".scroller").click(function() {
    scrollWin("#pippo");
});

Come personalizzare le liste

Aggiungiamo a ogni list-item ,per esempio, l’elemento “»":

$("ul").addClass("Replaced");
$("ul > li").prepend("»");

Impostiamo i CSS in modo tale da nascondere i bullet-point preimpostati:

ul.Replaced {
 list-style : none;
}

Cambiare i fogli di stile

Vogliamo aggiungere uno “style-switch” in modo che i navigatori del nostro sito possano scegliere, per esempio, tra uno stile ad alto contrasto e uno stile di stampa? E’ molto facile da fare: quello che ci serve è una serie di link con ID univoco:

Scegli uno stile:
	
  Contrast
  Print
  Normal

Ecco come impostare i comandi JavaScript:

$("#StyleContrast").click(function() {
	$("link[media='screen']").attr("href", "Contrast.css");
  });
$("#StylePrint").click(function() {
	$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
	$("link[@media='screen']").attr("href", "Normal.css");
});

Campi di ricerca personalizzati

Un piccolo script, che popola un campo di testo di un modulo con un testo predefinito come descrizione.
Questo testo sparisce se l’input è in focus, e ricompare se il focus è perso senza alcun input:

Dato che questo compito può essere usato in diverse situazioni, è una buona idea scrivere una funzione riutilizzabile. Il primo parametro è un selettore (nel nostro caso “#Testo di ricerca”, ma qualcosa come “input[@name=search]” potrebbe andare bene), il secondo parametro è il nuovo valore predefinito di tale elemento di input (ad esempio “Inserisci i termini di ricerca qui ..”).

function populateElement(selector, defvalue) {
 $(selector).each(function() {
         if($.trim(this.value) == "") {
                     this.value = defvalue;
         }
})
 $(selector).focus(function() {
        if(this.value == defvalue) {
                    this.value = "";
         }
});
$(selector).blur(function() {
        if($.trim(this.value) == "") {
        this.value = defvalue;
        }
      });
}

Nel nostro caso particolare il codice JavaScript potrebbe apparire così:

populateElement('#SearchText', 'Inserisci la parola che cerchi..');

Prevenire il comportamento di default

Supponiamo di avere una pagina molto lunga, e di avere un link simile a quello qui sotto che viene utilizzato per scopi diversi da un collegamento ipertestuale. Se si fa clic su di esso, ci porterà in cima alla pagina. La ragione di questo comportamento è la presenza del simbolo #.

Per risolvere questo problema, è necessario annullare il comportamento predefinito, in questo modo:

$('#chiudi).click(function(e){
     e.preventDefault();
}); 

/* oppure */

$('#chiudi).click(function(){
    return false;
});

Font resizing

Questo è una delle più usate funzionalità in una pagina web, cioè la possibilità di permettere all’utente aumentare/diminuire la dimensione del carattere.
Siamo in grado di specificare l’ID, le classi o gli elementi HTML di cui si desidera regolare il carattere tramite un array.

$(document).ready(function(){
	 //Inseriamo un un array gli ID, classi e tag di cui vogliamo ridimensionare i font
  //Mettiamo html or body se vogliamo rendere tutti i caratteri ridimensionabili:
  var section = new Array('span','.section2');
  section = section.join(',');

	 //Resettiamo il font-size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
  $(section).css('font-size', originalFontSize);
  });

  //Aumentiamo il font-size
  $(".increaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(section).css('font-size', newFontSize);
  return false;
  });

  //Diminuiamo il font-size
  $(".decreaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(section).css('font-size', newFontSize);
  return false;
  });
  });

Impostiamo adesso un pannello per passare da un font-size a un altro:


		+ |
		- |
		=

	Questo font può cambiare di dimensione
  Questa sezione non cambia il font!
  Questa invece sì!

Rimuovere una parola

Ecco il modo più semplice: usiamo le espressioni regolari:

var el = $('#id');el.html(el.html().replace(/parolaDaRimuovere+parolaDaRimuovere/ig, ""));

Ottimizziamo l’uso dei Plugin

I plugin di jQuery devono essere inclusi nella pagina principale dopo il core jquery.js, così:

Il metodo migliore però è quello di copiare tutti i file JavaScript in un singolo file e poi comprimerli con YUI e impacchettarli.

Aggiungere / inserire elementi HTML dentro un elemento

Il metodo .append() inserisce il contenuto specificato come l’ultimo figlio di ciascun elemento della collezione jQuery (per inserirlo come primo figlio, usare. .prepend()).

I metodi .append() e .appendTo() svolgono lo stesso compito. La principale differenza è nella sintassi, in particolare, nel posizionamento dei contenuti e di destinazione.
Con append(), l’espressione che precede il metodo di selezione è il contenitore in cui è inserito il contenuto. Con .appendTo(), al contrario, il contenuto precede il metodo, sia come espressione di selezione o di markup creati al volo, ed è inserita nel contenitore di destinazione. Ecco cosa scrivere:

$('#questoDiv').append("testo inserito");

..che equivale a:

$('testo inserito').appendTo('#questoDiv');

Aggiungere / inserire elementi HTML dopo un elemento

Dobbiamo usare .insertAfter(), oppure .after()

Rimpiazzare un
con jQuery

$('#questoDiv').replaceWith('Altro div
');

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

Combiniamo più effetti in jQuery per animare e rimuovere un elemento dal DOM:

$("#myButton").click(function() {
        $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
            $(this).slideUp("slow", function() { //slide up
            $(this).remove(); //e rimozione dal DOM
        });
});
});

…alla fine: Javascript Error Checker!

Adesso che abbiamo tutti questi script da utilizzare nel nostro sito, come testarli? Il debug di script javascript possono essere molto lunghi in termini di tempo. Così, se non riusciamo a risalire a che cosa sta causando gli errori, è possibile utilizzare questo strumento online gratuito: JSLint

Letture consigliate

http://addyosmani.com/blog/50-jquery-snippets-for-developers/
20 Helpful jQuery Methods you Should be Using
very useful jQuery Tips and Tricks for all jQuery developers
8 awesome JQuery tips and tricks
6 quick jQuery tips: Text manipulation, timers and elements
51+ Best of jQuery Tutorials and Examples
jQuery Tips and Tricks II
Quick Tip – Set Hover Class for Anything
jQuery DIV click, with anchors
JQuery HowTo
30 Javascript Menu Plugins and Scripts
Improve your jQuery – 25 excellent tips
Playing with jQuery Color Plugin and Color Animation
Animate a hover with jQuery
Scroll to the top of a webpage with jQuery
Tutorials:5 Quick jQuery Tips
Useful and Handy jQuery Tips and Tricks
6 fast jQuery Tips: More basic Snippets
6 quick jQuery tips: Text manipulation, timers and elements
10 Tips for Writing Better jQuery Code

paitadesignblog » consigli