Desde hace tiempo he estado oyendo hablar de jQuery, la verdad es que no lo había probado, y NO soy fan de java script.
¿Qué es jQuery?
Es un framework de javaScript en el cual vienen un montón de funciones capaces de implementar muchas mejoras en nuestra pagina web. Se pueden hacer efectos muy buenos, también validaciones asíncronas con AJAX….
jquery , accordion
JQuery viene instalado en wordpress en wp-admin/js desde hace ya algunas versiones(mínimo la 2.5). JQuery y Thickbox, éstos son los encargados de mostrar el efecto similar a lightbox. Esto ocurre cuando buscamos una imagen para subir y se oscurece la pantalla mostrando solo el menú contextual.
Bien pues después de echar un ojo a las librerías jQuery, Mototols solo puede decir que me ha encantado, yo creía que estos efectos solo estaban al alcance de flash y similares.
(Para ejemplo la nieve que tenemos puesta estas navidades en el Blog, y los menús que están hechos con el famoso ‘accordion’).
En esta web http://docs.jquery.com tenéis demos de jQuery y bastantes tutoriales. (En ingles)
¿Que necesitamos para utilizar jQuery?
Obviamente asegurarnos de cargar las librerías (sino tienes wordpress o es menor que 2.5 tendrás que subirtelas a tu servidor), en alguna parte de tu Web tienes que cargar las librerías con algo parecido a:
<script type=”text/javascript” src=”/ruta/donde/esta/jquery.js”></script>
Aunque también puedes cargar las que google pone a tu disposición:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js” type=”text/javascript”></script>
En este ejemplo con jQuery, quiero realizar el típico menú acordeon, en tres pasos.
PASO UNO.
Primero subo el css (hoja de estilo).
Algo parecido a:
accordion {
width: 200px;
border-bottom: solid 1px #24c3c4;
}
.accordion h3 {
background: #e9e7e7;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, Arial;
border: solid 1px #c4c2c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
En mi caso lo agregué directamente al css del tema, o sea en “style.css” que se que wordpress lo carga siempre.
Así me ahorro tener que cargar la hoja de estilos que he subido. Si no lo haces así tendrás que cargarla.
PASO DOS.
Luego pongo los elementos del acordeon.
<div class=”accordion”>
<h3>Blog</h3>
<p>el texto</p>
<h3>Entradas</h3>
<p>el texto</p>
<h3>Encuestas</h3>
<p>el texto</p>
<h3>Objetos</h3>
<p>el texto</p>
<h3>Herramientas</h3>
<p>el texto</p>
</div>
PASO TRES.
Y por último, pongo como quiero que funcione.
<script type=”text/javascript”>
$(document).ready(function(){
$(”.accordion h3:first”).addClass(”active”);
$(”.accordion p:first(:first)”).hide();
$(”.accordion p:not(:first)”).hide();
$(”.accordion h3″).click(function(){
$(this).next(”p”).slideToggle(”slow”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”active”);
$(this).siblings(”h3″).removeClass(”active”);
});
});
</script>
Si queréis hacerlo mas fácil todavía, con wordpress podéis añadir un widget y copiar en él, el paso tres seguido del paso dos. Es un poco más “desordenado”, pero tienes el mismo resultado.
