Ajouter automatiquement une icone aux documents à télécharger
Posté le Monday 27 June 2011 | Catégories : Javascript, Mootools
Lorsqu'un lien ne pointe pas vers une page web mais vers un document à télécharger (par exemple au format PDF, Word, Excel, ou autre), il vaut mieux l'indiquer au moyen d'une icone. Grâce à Mootools on peut le faire automatiquement.
L'idée consiste à tester chaque lien de la page. Si la cible se termine par ".pdf", on ajoute les classe "download" et "pdf". Au passage on ajoute également un titre "PDF" pour le lien :
<script type="text/javascript" src="mootools-core-1.3.2-full-compat-yc.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
$$("a").filter(function(el) {
return el.href && el.href.test(/.pdf$/i);
}).addClass('download')
.addClass('pdf')
.setProperty('title', 'PDF');
});
</script>
Il suffit ensuite d'ajouter les classes CSS "download" et "pdf" CSS :
<style type="text/css">
.download{
background-repeat: no-repeat;
background-position: 100% 0%;
padding-right: 22px;
}
.pdf{
background-image: url('icon_pdf_16x16.gif');
}
</style>
