Dado el código anterior, al abrir la página parpadearán los elementos de la clase "parpadear" y luego habrá un botón que
repetirá la acción de parpadear cuando se pulse.
En este caso no hemos colocado el script en un archivo aparte con el nombre jquery.parpadea.js, tal como se recomendaba,
pero de momento será suficiente para probar esto de los plugins y quizás más fácil porque así no necesitamos más que un
archivo HTML con todo el código junto. Podemos ver el código completo de este ejemplo a continuación:
<html>
<head>
<title>Creando plugins en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.parpadea = function() {
this.each(function(){
elem = $(this);
elem.fadeOut(250, function(){
$(this).fadeIn(250);
});
});
return this;
};
$(document).ready(function(){
//parpadean los elementos de class CSS "parpadear"
$(".parpadear").parpadea();
//añado un evento clic para un botón, para que al pulsarlo parpadeen los elementos de clase
parpadear
$("#botonparpadear").click(function(){
$(".parpadear").parpadea();
})
})
</script>
</head>
<body>
<p class="parpadear">Hola que tal, esto parpadeó gracias a jQuery!</p>
<p>Parafo normal que no va a parpadear.</p>
<p class="parpadear">Sí parpadea</p>
<p>Parafo normal que no va a parpadear tampoco...</p>
<div class="parpadear" style="background-color: #ff9966; padding: 10px;">Esta capa también tiene
la clase parpadear, con lo que ya se sabe...</div>
<p><input type="button" value="Parpadea de nuevo" id="botonparpadear"></p>
</body>
</html>
Nota: Contamos con un taller de JQuery donde recopilamos un conjunto de plugins y mostramos cómo se construyen
No hay comentarios:
Publicar un comentario