Í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)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

jQuery sin conflictos

Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos. Cuando uno comienza un proyecto, [...]

Muerte a IE: nuevo plugin

Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se [...]

Estilos alternados con CSS3, jQuery y Mootools

Este será un artículo corto y preciso: cómo alternar estilos dentro de un mismo elemento utilizando 3 técnicas diferentes. Con el siguiente HTML de ejemplo: <ul> <li>Elemento Uno</li> <li>Elemento Dos</li> <li>Elemento Tres</li> <li>Elemento Cuatro</li> <li>Elemento Cinco</li> </ul> CSS3 Comencemos con la más vanguardista: con CSS3, a cada elemento impar (odd) agrégale el estilo definido: ul [...]

  1. 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;

    FitoDotNET
    03 / Diciembre / 2007

  2. Sí, es cierto pero no es compatible con IE <6. ¬¬

    xmax
    03 / Diciembre / 2007

  3. 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 :)

    Mañungo
    04 / Diciembre / 2007

  4. 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

    noth
    04 / Diciembre / 2007

  5. 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.

    Daniel G. Blázquez
    12 / Diciembre / 2007

  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

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 0 veces