Jquery: applicare automaticamente classi diverse ai link
08/05/2012Molto spesso le scelte di usabilità e design portano a differenziare gli stili con cui vengon presentati i collegamenti a seconda di dove puntano.
Ad esempio se a un pdf il link apparirà diverso piuttosto che a un file word o un file excel etc etc.
Con Jquery possiamo evitare di applicare manualmente una classe diversa per ogni tipo di link: sarà sufficiente nel nostro foglio stile definire le caratteristiche delle classi necessarie, nominandole secondo le estensioni dei file da individuare e differenziare.
Ad esempio
.doc {
color: red;
text-decoration: none;
}
.pdf {
color: blue;
text-decoration: none;
}
e così via.
Dopo aver definito le regole CSS carichiamo l'ultima versione di Jquery, (qui l'articolo),e aggiugngiamo lo script, questo
$(document).ready(function() {
$('a[href]').each(function() {
if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
$(this).addClass(C[1]);
}
});
});
Naturalmente possiamo aggiungere tutte le estensioni che ci interessano!