apr 18
Ecco un piccolo script jQuery che aggiunge delle classi specifiche ai link all’interno di una pagina web. Utile insomma per visualizzare un icona di fianco ai link. Lo script fa il match di tutti gli elementi <a> con la classe doctype, e poi applica una sottoclasse.
Andrebbe inserito nella funzione DOMReady della pagina, le classi inoltre vanno definite nel css.
Javascript:
$("a.doctype[href]").addClass('empty');
$("a.doctype[href]").filter(function() { return /\.(bmp|jpg|jpeg|png|gif|tif)$/i.test(this.href); } ).addClass('image');
$("a.doctype[href]").filter(function() { return /\.(txt)$/i.test(this.href); } ).addClass('list');
$("a.doctype[href]").filter(function() { return /\.(pdf)$/i.test(this.href); } ).addClass('pdf');
$("a.doctype[href]").filter(function() { return /\.(docx|doc|odt)$/i.test(this.href); } ).addClass('word');
$("a.doctype[href]").filter(function() { return /\.(xlsx|xls|ods)$/i.test(this.href); } ).addClass('excel');
$("a.doctype[href]").filter(function() { return /\.(ppt|pptx|odp)$/i.test(this.href); } ).addClass('ppt');
$("a.doctype[href]").filter(function() { return /\.(zip|rar)$/i.test(this.href); } ).addClass('ark');
CSS:
.doctype { padding: 1px 2px 2px 18px ; background-repeat: no-repeat; background-position: center left; }
.doctype.empty { background-image: url(img/document.png); }
.doctype.ark { background-image: url(img/document-ark.png); }
.doctype.excel { background-image: url(img/document-excel.png); }
.doctype.image { background-image: url(img/document-image.png); }
.doctype.list { background-image: url(img/document-list.png); }
.doctype.pdf { background-image: url(img/document-pdf.png); }
.doctype.ppt { background-image: url(img/document-ppt.png); }
.doctype.word { background-image: url(img/document-word.png); }
Ovviamente le icone dovete procurarvele vuoi 
