Pedir presupuesto

Tutorial jQuery – V1 «Slide Panel con Ajax»

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

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

7 comentarios

  1. 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

  2. existe alguna forma de hacer que el slide aparezca desde abajo a arriba?

    siempre con jquery

    ojalá puedan ayudarme bcabezasr[at]gmail[dot]com

  3. 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…

  4. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es