Hola, en esta ocasión vamos a ver como podemos crear un método jQuery que nos permita emular un efecto persiana sobre determinados elementos, el objetivo es que podamos pasar este método (accordion) a un elemento, por ejemplo, un button y que al hacer click sobre el mismo se muestro u oculte un determinado contenido, el método accordion contendrá tres argumentos, el primero (element) el cual utilizaremos para indicar el elemento que obtendrá el efecto persiana, el segundo (options) opcional para indicar opciones como pueden ser visible para decidir si el elemento será visible o no de inicio y duration para indicar la velocidad de la animación y y finalmente un tercero (callback) para poder incluir una llamada una vez ha finalizado la animación.
Aquí puedes ver un ejemplo del efecto persiana al hacer click sobre el botón:
Hello World
Código fuente del ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<script>
$.fn.accordion = function(element, options, callback){
defaults = {
visible: false,
duration: 400
};
if (options === undefined){options = defaults;}
if (callback === undefined){callback = function(){}}
if (!options.visible){$(element).css({display: "none"});}
$(element).addClass("accordion");
this.on("click", function(){
$(element).slideToggle(options.duration, function(){
callback();
});
});
};
$(function(){
$("#btn-1").accordion("#box-1", {visible: false, duration: 800}, function(){console.log("Hello World");});
});
</script>
</head>
<body>
<button type="button" id="btn-1">Accordion</button>
<div id="box-1">
<div>Hello World</div>
<div><a href="#">Link</a></div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario