Interruptor para cambiar el tamaño de fuente con jQuery

cambiar-fuente-jquery

En este tutorial usaremos jQuery para crear un pequeño script que cambie el tamaño de la fuente al presionar un botón. Vamos a crear una sencilla interfaz con 3 botones, un texto y un poco de jQuery, uno de los frameworks javascript mas fáciles de usar.

La estructura xHtml y CSS

Antes que nada, debes establecer la llamada al archivo CSS y JS en el head del documento, para este ejemplo uso la versión 1.3.2 de jQuery.




En el “Body” tenemos el div “Botones” que contiene en su interior tres divs llamados “Boton” que alternarán el tamaño de la tipografía del texto cada vez que se haga click sobre ellos. Como podrás ver “Texto grande” y “Texto chico” tienen unas ID que se llaman “aumentar” y “disminuir”, esas ID son las que vamos a usar en el script para determinar cuando cambiar el tamaño tipográfico usando el condicional If/Else.

En el CSS, debemos especificar un tamaño de fuente para el “Body” que será el “Texto normal” y también crear las clases “grande” y “chica” con sus respectivos font-size.

Texto Grande
Texto Normal
Texto Chico

Titulo del texto

<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.</p> <p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.</p>


body{
font-size:12px;
background-color:#FFFAE6;
font-family:Arial, Helvetica, sans-serif;
}
#cuadro{
border:1px solid #CCCCCC;
width:700px;
}
/*Botones*/ 
#botones{
border:1px solid #CCCCCC;
padding:10px;
float:left;
margin-bottom:10px;
margin-right:30px;
}
.boton{
border:1px solid #FFFFCC;
background-color:#003366;
color:#FFFFFF;
font-size:14px;
float:left;
margin-right:10px;
padding:6px;
}
/*Tamaños de tipografías*/ 
.grande{
font-size:16px;
}
.chica{
font-size:9px;
}
/*Efecto de boton activo y hover*/ 
.seleccion{
font-weight:800;
}
.sobre{
background-color:#CC0000;
cursor:pointer;
}

El Script jQuery

El script en si es muy sencillo de entender, lo único que hace es agregar y quitar las clases “grande” y “chica” que están activas sobre el “Body”.

$(document).ready(function(){
$('#botones .boton').click(function(){ /*al hacer click en un botón*/
$('body').removeClass();    /*borre todas las clases*/
if(this.id == 'aumentar'){   /*si la clase botón tiene el ID aumentar*/
	$('body').addClass('grande');  /*cargue desde el CSS la clase grande*/
	}
else if(this.id == 'disminuir'){ /*si el ID es disminuir*/
	$('body').addClass('chica'); /*cargue la clase chica*/
}
$('#botones .boton').removeClass('seleccion'); /*elimine la negrita del boton*/
    $(this).addClass('seleccion');/*agregue la negrita al botón activo*/
 });						   
});

/*EFECTO HOVER*/
$(document).ready(function() {
  $('#botones .boton').hover(function() {
    $(this).addClass('sobre'); /*agregue efecto hover*/
  }, function() {
    $(this).removeClass('sobre');  /*quite efecto hover*/
  });
});

Resultado

En el siguiente enlace esta el ejemplo funcional del script. Con un poco de astucia se lo puede mejorar agregando botones y combinándolo con nuevas ideas.


Ver el ejemplo

Recursos complementarios

Descarga el framework jQuery

Además de poder descargar el framework, el sitio oficial tiene infinidad de recursos y tutoriales interesantes.


Ordena tus hojas de estilos

Stylenet es una herramienta online que ordena hojas de estilos CSS.


Deja un comentario