jQuery plugin: fontSizer

7/ago/2008 10

Un nuevo plugin para el grandioso jQuery ha nacido. Por un proyecto en el cual estoy involucrado, era necesario un método parametrizable para manejar aumento/disminución del tamaño de fuentes. Busqué mucho un plugin para esto, y me frustré bastante dado la carencia del ideal, así que gracias a la habilidad del web developer Rodrigo Augosto, surge este nuevo aporte a la accesibilidad web.

Ver ejemplo

Modo de Uso

  1. Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
  2. Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
  3. Inicializar el plugin, como en el ejemplo:
$(document).ready(function(){
$("#aumentar").fontSizer({
action: "up"
});
$("#disminuir").fontSizer({
action: "down",
});
});

Eso es. El único parámetro obligatorio es indicar la acción de cada link mediante action. Los parámetros son:

  • action: "up/down" (requerido).
  • elements: "elemento" (un id, class o etiqueta donde actuará el cambio de tamaño de fuente).
  • increment: número (en cuántos pasos serán el cambio de tamaño; por defecto es de 1 en 1).
  • max: número (tamaño máximo del tamaño de fuente; por defecto es 30px).
  • min: número (tamaño mínimo del tamaño de fuente; por defecto es 8px).

Por ahora solo ha sido probado con jQuery 1.2.6, pero no debería de tener problemas con versiones desde 1.2+

Descargar (.zip)

Comentarios

  1. Carlos Leopoldo [#]

    Muy buen trabajo, muy buen plugin, sólo le agregaría una cosa, la posibilidad de resetear la fuente a su tamaño original, ya que después de varios clicks en aumentar se pierde la cuenta de cuanto lo aumentamos y para regresar al tamaño original se puede dificultar.

    Todo lo demás perfecto, un saludo

  2. Aumenta el tamaño de la fuente con jQuery [#]

    [...] web, y el usarlo en tu sitio web o blog es muy sencillo, solamente debes de descargar el plugin FontSizer y jQuery en cualquier versión superior a la [...]

  3. Rodrigo Augosto [#]

    Muchas gracias Carlos Leopoldo, muy buena tu sugerencia, dalo por seguro que la implementaré.
    Aprovecho de dar las gracias a Jorge por publicar mi plugin para compartirlo y pedir disculpas por mi aun pésimo sitio. (Casa de herrero, cuchillo de palo)

  4. fearlex [#]

    Muy bueno, y facil de usar, si concuerdo con Carlos :D

  5. JQuery: Una de plugins para efectos de texto | Jugando entre diseñadores [#]

    [...] Flipv (Demo – Descarga) 2. FontEffect (Demo – Descarga) 3. FontSizer (Demo – Descarga) 4. Scrabble Text (Demo – Descarga) 5. Moatext (Demo – [...]

  6. Jose Miguel [#]

    Se podría resolver temporalmente en los parámetros max: 14, min: 8, colocando como minimo el tamaño de la fuente en ese momento, esto es para evitar q se reduzca mas del tamaño que tiene definido, yo lo resolvi así. Excelente plug-in, Saludos…

  7. Nuevo [#]

    El jquery.fontSizer.js falla cuando usamos en pantalla el api de Gmaps:
    Error: $(“#aumentar”).fontSizer is not a function

  8. Nuevo [#]

    Situándo la carga de la librería jquery.fontSizer.js después de gmaps.js funciona perfectamente.

  9. Jorge Epuñan [#]

    Asi es Nuevo es mejor dejar los JS q no dependen de jQuery antes de esa libreria y juntar las dependientes luego del llamado de jQuery, y al final del </head>

  10. Nacho [#]

    Muy bueno, aunque me he liado un poco implementándolo :P

    Probado con jQuery 1.2.5 funciona perfectamente.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab