Íconos para mejor usabilidad

Relativo a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links que sean relativos a descargas de diferentes tipos de documentos, a links externos (target="_blank"), a direcciones de e-mail ("mailto:") y a links de impresión ("window.print"). Como surgió la necesidad, y no encontré ninguno que hiciera eso en la página de plugins de jQuery, me puse a hacer el mio propio.

UsableIcons v1.0 plugin for jQuery

No es nada del otro mundo de complejo; en realidad es bastante simple. Lo que hace es leer las etiquetas <a> buscando por sus atributos href y target por las extensiones anteriormente nombradas y si las encuentra, agrega una class respectiva que tiene ese ícono. Lo bueno es que puedes configurar en qué <div> aplicarlo a través de un id o class.

Es la versión 1.0 y se esperan mejoras, dependiendo del feedback.

Página oficial

Ver demo

Bajar jquery.usableicons plugin v1.0 (.zip)

  1. FitoDotNET

    pero eso mismo se puede hacer con css:

    a[href^="mailto:"]{
    background: url(img/email.png) right center no-repeat;
    padding-right: 18px;
    }

    a[href $=".pdf"]{
    background: url(img/page_white_acrobat.png) right center no-repeat;
    padding-right: 18px;
    }

    a[href $=".doc"]{
    background: url(img/page_word.png) right center no-repeat;
    padding-right: 18px;
  2. xmax

    Sí, es cierto pero no es compatible con IE <6. ¬¬
  3. CSSLab Admin

    gracias xmax, precisamente por eso tuve q realizarlo via JS. lo q mencionas FitoDotNET se llama selector avanzado de atributo y lo tenia aplicado, pero el cliente requirio q se viera en IE6.
  4. Mañungo

    uhhhh yo hice algo parecido, pero para cargar los favicons de los sitios al lado de los links externos… queda bonito y mucho menos desagradable que SnapIt :)

  5. noth

    Ese mismo plugin lo tengo yo creado, me falta ir añadiendo más extensiones como las que has puesto tu, yo tengo puesto las más basicas y además si los links externos tienen favicon se puede poner ese como icono.

    os dejo la página para que lo comprobeís me ha gustado la idea de como lo has programado, muy bueno

    jquery-link

  6. Daniel G. Blázquez

    No abuseis de este tipo de iconos. Aunque a primera vista puede parecer buena idea, introducen mucho “ruido” en el texto y entorpecen la lectura.
  1. [...] creé mi primer plugin tuve bastante dificultad al no encontrar una documentación detallada, y espero con este [...]
    CSSLab - Videocast 3: creando un plugin para jQuery