miércoles, 28 de marzo de 2012

Ejemplos Basicos de JQuery : Evento Click de un elance o botton | Link or Button



Bueno aqui aplicaremos algunos de los conceptos vistos en este mini tutorial.
Veremos como añadir un evento a un determinado elemento como por ejemplo un enlace o un boton.

Bueno manos a la obra.

He de decir primero que ya importe mi la libreria para poder mostrarles los ejemplos, para todos los usuarios de blogger u otra plataforma solo debe agregar el siguiente código dentro de sus etiquetas head.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>

Bueno vamos a lo nuestro.

Una de las acciones mas usadas en el desarrollo es cuando uno da click en un boton que cargue determinado contenido.

Supongamos que este texto es lo que va a cargar con nuestra accion :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet magna nec dui hendrerit adipiscing sed et magna. Donec vitae orci nibh. Etiam tempus eros sit amet erat faucibus mattis porta orci aliquam.
Entonces nuestro HTML es asi

<a href="#" id="disparador">Mira como carga</a>
<button>Voy a quitar el lorem</button>
<div id="objetivo">Aqui va a ir el contenido</div>

Y nuestro script quedaria asi
$(function(){
$("#disparador").click(function(){
$("#objetivo").html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet magna nec dui hendrerit adipiscing sed et magna. Donec vitae orci nibh. Etiam tempus eros sit amet erat faucibus mattis porta orci aliquam.");
return false;
});

$("button").click(function(){
$("#objetivo").html("Aqui va a ir el contenido");
});

});
Demostracion :
Mira como carga

Aqui va a ir el contenido

Expliquemos un poco el código, primero como ya se mencionó en el tutorial anterior Tutorial JQuery desde 0, JQuery para seleccionar utiliza la lógica de los selectores CSS, esto es que el signo # indica que se selecciona en base al ID, si se usa el . (punto) entonces será en base a la clase, y si no tiene debiera ir el elemento como en este caso que es button
JQuery utiliza las llamadas funciones anónimas o funciones Lambda, es por eso que encuentran esta sintáxis (function(){//mi codigo}), asi dentro de la definicion de la funcion está lo que queremos realizar, por ejemplo, cuando hemos dicho $(function() {}); hemos invocado en realidad al evento $(document).ready de JQuery y dentro de la función anónima ponemos nuestro código.
Otra cosa a destacar si se percatan es que cuando añado el evento click al enlace agrego dentro de la función el return false mientras que en el evento del boton no lo he hecho, esto es porque al decirle que retorna falso indico que no se realice el comportamiento normal del enlace que es saltar hacia donde indique su propiedad href, ojo, esto no quiere decir que no se usa en los button, también, pero para este caso no es necesario.
Por ultimo la funcion .html(contenido) es auto descriptiva, ordena que se escriba el contenido dentro de la etiqueta seleccionada.

Para saber mas :

JQuery y PHP combos enlazados

Tutorial : Crud Ajax con JQuery y PHP

Ejemplo Crud Ajax con JQuery y PHP

No hay comentarios:

Publicar un comentario

 
Powered by Blogger