Cortinilla de ayuda con jQuery

De ChuWiki

Vamos a ver cómo conseguir el efecto de ayuda de aquí abajo con jQuery. Por supuesto, con un poco más de gusto artítstico que yo, puedes hacerlo mucho más vistoso.

Click en el ? para desplegar la ayuda, otro click para ocultarla.

Insert title here

?

This is the help for foo number field and it is a very large text


?

This is the help for bar number field


Another text

Aquí tienes el código completo helpButton.html

html[editar]

El html que debemos hacer es el siguiente

	<form>
		<div id="container">
			<label>foo number: </label><input type="text"></input><span class="helpButton">?</span>
			<p class="help">This is the help for foo number field and it is a very large text</p><br/>
			<label>bar number: </label><input type="text"></input><span class="helpButton">?</span>
			<p class="help">This is the help for bar number field</p><br/>
		</div>
	</form>
	<p>Another text</p>

Hemos puesto al div un id container para ayudar a jQuery a localizarlo. Con CSS haremos que el div tenga el ancho necesario para su contenido, sin ocupar el 100% del ancho de la página y con jQuery haremos que los párrafos de ayuda tengan el mismo ancho del div. De esta forma, conseguiremos que el texto de ayuda tenga de ancho más o menos lo que ocupa la etiqueta, el campo de texto y el botón que tiene justo encima. Lo vemos con más calma cuando veamos la parte de javascript y de CSS.

El botón de ayuda es un simple span al que hemos puesto una clase helpButton. Nos sirve esta clase para darle un poco de estio con CSS (el color azul clarito, aunque lo más chulo sería ponerle un icono de ayuda) y para poder buscarlo fácilmente con jQuery. Todos los botones de ayuda tienen la misma clase.

El párrafo de ayuda también tiene una clase help. Con CSS debemos hacer que esta clase esté oculta y no ocupe espacio por medio de display:none. Tal cual vamos a hacer el código, es importante que este párrafo de ayuda vaya inmediatamente detrás del span que hace de botón y sea hermano de él en la jerarquía html.

código jQuery[editar]

El código javascript con jQuery es el siguiente

<script	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
   $(function(){

      $(".helpButton").click(function(){
         $(this).next(".help").slideToggle();
      });

      $(".help").width($("#container").width());
   });

Como hemos visto en otras ocasiones, $ es la variable principal creada por jQuery y a partir de ella accederemos a toda la funcionalidad de esta potente librería.

La llamada $(function() {...}) le pasa a jQuery una función a la que jQuery llamará cuando la página esté completamente cargada. ES en esta función donde vamos a poner nuestro código.

$(".helpButton") hace que jQuery busque todos los elementos cuya clase (el . de delante indica clase, al igual que en CSS) sea helpButton, es decir, todos nuestros botones (span). La función click() de jQuery permite añadir a los elementos seleccionados (los botones) una función a ejecutar cuando se haga click sobre el botón. Así que creamos ahí una function() con el código encargado de desplegar u ocultar la ayuda.

Dentro de esta función, jQuery se encargará de que this sea el elemento sobre el que se ha hecho el click, es decir, el botón concreto de ayuda. $(this) nos dará acceso a través de jQuery a este botón para poder llamar a funciones jQuery sobre él.

$(this).next() nos devuelve el siguiente hermano en la jerarquía html del botón, es decir, el párrafo de ayuda. Este es el motivo por el que dijimos que el párrafo debía ir justo a continuación del span que hace de botón. Si no se pone el párrafo a continuación, deberíamos usar aquí algún otro mecanismo para localizarlo a partir del botón que se ha pulsado.

Llamamos ahora a slideToggle() del párrafo que acabamos de obtener. Esta función jQuery hace que el párrafo aparezca o desaparezca de forma gradual. Podríamos pasar como parámetro un entero que indique el número de milisegundos que queremos que dure el efecto. Podríamos poner otras animaciones para hacer aparecer o desaparecer el párrafo, como puedes ver en Efectos animados con jQuery

En la siguiente línea, con $(".help") le decimos a jQuery que busque todos los elementos con clase help, es decir los párrafos. La llamada width() de jQuery tiene un comportamiento distinto según le pongamos o no parámetro. Sin parámetro devuelve el ancho del elemento. Con parámetro fija el ancho del elemento al valor del parámetro que le pasamos. Vamos a hacer que los párrafos tengan el mismo ancho que el div container que los contiene. De esta forma evitaremos que al visualizar un párrafo se ensanche todo. Así que llamamos a $(".help").width(...) para fijar el ancho, y ponemos como ancho el del div, que se obtiene con jQuery de esta forma $("#container").width(). La # delante de container le indica a jQuery que container es un id de un elemento, al igual que en CSS.

El CSS[editar]

El CSS para esto puede ser

.helpButton {
   background-color: cyan;
   margin-left:10px;
   cursor: pointer;
}
.help {
   display : none;
   border: solid 1px black;
   background-color: cyan;
}
#container {
   display:inline-block;
}

No explicamos la parte de colores y estilos visuales, que seguro que lo haces mejor que yo. Vamos a los detalles importantes.

A los párrafos de ayuda de clase help les ponemos display:none para que no sean visibles por defecto.

Al div container le hemos puesto display:inline-block. Esto hace que coja el ancho necesario para mostrar los comonentes que tiene dentro. Como los párrafos van a estar ocultos por defecto, no cuentan para el cálculo de este ancho, así que el div ocupará, en vez de el 100% del ancho de la página, sólo el ancho necesario para contener los label, los input y el span que hace de botón.

Cuando visualicemos el párrafo, si no hacemos nada especial, el párrafo tenderá a ocupar el 100% del ancho de la página y hará que se estire el div. Como queremos que el párrafo más o menos ocupe el ancho del label, input y span, le fijamos desde jQuery el ancho como hemos visto antes. Y le ponemos el ancho del div, que ya se ha ajustado al ancho necesario gracias a su display:inline-block