Cada día se hace más notable el uso de efectos en las páginas webs sin tener que utilizar la tan conocida herramienta de macromedia Adobe como es Flash.
Hoy en día gracias a librerías ya existentes, y a la utilización de AJAX, Javascript y CSS se pueden lograr efectos muy visuales, y sobre todo con posibilidad de tener código semántico.
No me entretengo más y voy a explicar algun tutorial al respecto … aunque mi idea es hacer muchos más.
Antes de empezar, es necesario descargarse la librería desde aquí.
El primer punto una vez tenemos los archivos (librerias) descargadas, es como enlazarla con nuestra página. Pues bien, lo único que tenemos que hacer es incluir este código entre las etiquetas <HEAD> y </HEAD>.
[js][/js]
Implementar las funciones de jQuery es bastante fácil si tenemos en cuenta la documentación. Lo que hay que saber es cómo podemos obtener el elemento al que queremos aplicarle el efecto.
$(“#cabecera”) = Obtendremos el elemento con id=”cabecera”
$(“div #contenido .enlaces”) = Obtenemos todos los elementos con clase enlaces que estan anidados al <div id=”contenido”>.
Hoy crearemos el primer ejemplo del uso de jQuery con un panel de diapositiva que pulsando un botón se mostrará y pulsándolo otra vez se esconderá.
1. Panel de diapositivas
Cuando hacemos clic en un elemento class=”diapositiva” la capa div=”panel” se deslizará arriba/abajo. Tendremos que jugar también con la clase active para controlar los estados.
Empezaremos por poner este código javascript entre dentro de la etiqueta
[html]$(document).ready(function(){
$(«.btn-slide»).click(function(){
$(«#panel»).slideToggle(«slow»);
$(this).toggleClass(«active»);
});
});
[/html]
A continuación tendremos que codificar lo que va a aparecer en el panel. En el caso del ejemplo, el código incluido es el siguiente:
[html]
Colordeu
Colordeu creado a partir de la ambicion de gente joven, esta constituido por personal con experiencia, creativa y motivada, Respaldado por un equipo competente y colaboradores con proyectos importantes en el sector, ofrecemos a nuestros clientes un abanico de posibilidades en cuanto a las nuevas tecnologias. Este blog sobre de diseño, tecnologia, programacion, internet y curiosidades es nuestro caramelito y queremos compartirlo con todos vosotros.
- Ajax
- Php
- Diseño
- Curiosidades
[/html]
Ejemplo: Slide Panel
Descarga: Mi Slide
7 comentarios
muy pero muy buen ejemplo, me ha servdo de mucho, mis agradecimientos
salu2 y felicitaciones
Me alegro que te haya servido.
Es lo que pretendo con el blog, ayudar en lo que se pueda …
Saludos.
Me gusta si realmente, pero quisiera saber como me podrian ayudar a mostrar este slide, al presionar un boton hecho en flash, y que me muestre el slide en un div en la misma pagina.
Gracias de antemano y muy buenos datos sobre Jquery
existe alguna forma de hacer que el slide aparezca desde abajo a arriba?
siempre con jquery
ojalá puedan ayudarme bcabezasr[at]gmail[dot]com
a proposito, por que el nombre?
Tutorial jQuery – V1 “Slide Panel con Ajax”
segun tengo entendido Ajax viene a ser la comunicación asincrona con el servidor, en segundo plano….
http://es.wikipedia.org/wiki/AJAX
hector2c imagino que porque el jquery es considerado framework de ajax, y que pes si le metes la función ajax ahi fácil tienes tu slide panel CON ajax xD claro que ese codigo se le implementa 😛 claro … hay que ser mas precisos, aunque ese V1 quiere decir Versión 1?? no se pes a lo mejor para la Versión 2 que muestre luego nos la muestra completa 😛 saludos…
Hola, muy bueno!, mi idea es poder ponerlo en forma vertical, por lo que al hacer click se desplace hacia la izquierda y de nuevo a la derecha. Es posible?, Si me das una mano te lo agradecere.
Saludos