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

Una nueva manera de mostrar más información / A new way to show more info Selecciona tu idioma / Select your language: Español English ES Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y [...]

Review: CSS Hat

Codear HTML/CSS es una tarea cada vez más requerida, y más exigente debido a lo rápido que avanza la tecnología web (gracias al aporte de muchos contribuidores anónimos, y al silent upgrade de los browsers entre otros factores). Por esto se agradece cuando llega una herramienta que nos facilite la vida y mantenga nuestro trabajo [...]

<option disabled="disabled"> en IE6+

Nuevamente vengo con un error de nuestro querido amigo IE6 que también es compartido por IE7 y el beta1 de IE8 (estos de Micro$oft no aprenden nunca…). Gracias a Rodrigo, me hizo notar que estos browsers no interpretan correctamente a <option> de un <select> que contenga el atributo disabled="disabled". Todos los otros navegadores buenos lo [...]

  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
Cargando