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.
Modo de Uso
- Adjuntar jquery.js y jquery.fontSizer.js entre las etiquetas <head></head>
- Definir id’s para ambos links, por ejemplo #aumentar (+) y #disminuir (-)
- 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+
Comentarios
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
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)
Muy bueno, y facil de usar, si concuerdo con Carlos 😀
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…
El jquery.fontSizer.js falla cuando usamos en pantalla el api de Gmaps:
Error: $(«#aumentar»).fontSizer is not a function
Situándo la carga de la librería jquery.fontSizer.js después de gmaps.js funciona perfectamente.
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>
Muy bueno, aunque me he liado un poco implementándolo 😛
Probado con jQuery 1.2.5 funciona perfectamente.