Your SlideShare is downloading. ×
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
J query
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

J query

111

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
111
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. •Nombres: •Jonathan Padilla •Franklin Macías •Carolina Santana •Kevin Morales
  • 2.  Para declarar funciones Jquery se utiliza la palabra reservada "fn" de función, y el modo de uso es el siguiente ... Y luego la llamamos como a otra cualquier función de Jquery ...  En el siguiente ejemplo, se ha creado un par de funciones, una será para aplicar background al elemento(background) y otro para crear una animación(animar). Funciones de Jquery $.fn.tufuncion = function(tus parametros) { // el resto de instrucciones } $("#id").tufuncion("parametros si existen");
  • 3.  Creamos una función Jquery para cambiar el background del elemento  Creamos una función para animar el elemento que aceptará un valor booleano true = si animar | false = no animar $.fn.background = function(_background) { $(this).css({background: _background}); } $.fn.animar = function(_bool) { if (_bool == true) { $(this).css({position: "absolute"}); $(this).animate({left: "+=200", bottom: "+=100"}, 1000, function()
  • 4.  Ahora llamamos a las nuevas funciones Jquery { $(this).animate({left: "-=200", bottom: "- =100"}, 1000); }); } } $(function(){ $("#demostracion").background("black"); $("#crear_efecto").click(function(){ $("#demostracion").animar(true); }); });
  • 5.  Y en el body colocamos el siguiente div y botón ... <div style="width: 250px; height: 250px;"><div id="demostracion" style="width:250px; height:250px;"></div></div> <input type="button" id="crear_efecto" value="Crear efecto">
  • 6. Crear funciones Jquery con opciones  Este ejemplo muestra como crear una función jquery que contenga opciones que permitan cambiar unas determinadas propiedades del elemento, o añadirle una función.  Primeramente abrimos la función Jquery ... $.fn.color = function(options) { //plugin };
  • 7.  Como se puede observar existe un parámetro llamado "options", pero este parámetro lo normal es que sea optativo, así que tendremos que declarar una opción "defaults" que será la opción dominante en caso de no especificarse explícitamente en el parámetro  Como se puede ver se ha declarado una variable llamada defaults, con 3 opciones, una para aplicar el color, otra para la opacidad y otra que es para albergar una función. var defaults = { color : "#000000", opacity: "1", funcion: function(){} }
  • 8.  Ahora es necesario hacer que defaults conste como prioritaria si el parámetro options no contiene nada, así que ... Con extend estamos combinando el contenido de defaults y options en la variable options, es decir ambos son lo mismo, así que si al utilizar la función no se especifica ninguna opción, se aplicarán las opciones que por defecto tiene la variable defaults. A continuación empezamos a construir el plugin ... var options = $.extend(defaults, options);
  • 9.  Como se puede observar estamos aplicando las propiedades que tendrá el objeto por defecto, defaults.color, defaults.opacity, quedando el plugin al completo de la siguiente forma ... /*plugin*/ this.css({color: defaults.color}); this.fadeTo("slow", defaults.opacity); /*plugin*/ $.fn.color = function(options) { var defaults = { color : "#000000", opacity: "1", funcion: function(){} } var options = $.extend(defaults, options);
  • 10.  Ahora haremos uso de la recién creada función ... /*plugin*/ this.css({color: defaults.color}); this.fadeTo("slow", defaults.opacity); /*plugin*/ //Averigua si el parámetro options contiene una función if($.isFunction(options.onComplete)) { options.onComplete.call(); } }; <script> $(function(){ $("#default").click(function(){ $("#caja").color(); }); $("#rojo").click(function(){ $("#caja").color({ color: "red", opacity: "0.7", funcion: $("#caja").css({fontSize: "20px"}) }); }); $("#verde").click(function(){ $("#caja").color({ color: "green", opacity: "0.9", funcion: $("#caja").css({fontSize: "17px"}) });
  • 11. }); $("#azul").click(function(){ $("#caja").color({ color: "blue", opacity: "0.8", funcion: $("#caja").css({fontSize: "14px"}) }); }); }); </script> <input type="button" id="default" value="default"> <input type="button" id="rojo" value="rojo"> <input type="button" id="verde" value="verde"> <input type="button" id="azul" value="azul"> <div id="caja"><h1>Función Jquery con opciones</h1></div>
  • 12. Crear funciones Jquery con opciones y callback  En el siguiente ejemplo podremos ver un sencillo plugin jquery que aceptará en uno de sus parámetros un callback, un callback nos permite realizar una determinada operación una vez que ha terminado la ejecución de la orden que le fue mandada , ya en anteriores posts enseñe como hacer un plugin basico, un plugin con opciones y ahora veremos uno con opciones y un callback.
  • 13.  Como se puede ver la función fuente contiene dos parámetros "options" y "callback", para options realizaremos la misma operación que se enseño en un post anterior Crear funciones Jquery con opciones... $.fn.fuente = function(options, callback) { //plugin }; var defaults = { fontSize : "18px", fontFamily: "arial" } var options = $.extend(defaults, options);
  • 14.  Ahora pasamos a definir el parámetro "callback", este parámetro al igual que "options" es opcional, así que haremos uso de javascript para definir que si es indefinido, es decir que si no se hace uso de él, que se le considere como una función, en este caso sin argumentos.  A continuación comenzamos a construir el plugin ... if (callback === undefined) { callback = function(){}; }
  • 15.  El plugin consiste en una sencilla animación de movimiento, a través de "options" podremos cambiar las propiedades css fontSize y fontFamily y si observamos al finalizar la animación se añade la función callback() que en caso de quererla utilizar, lo podremos hacer a través del segundo parámetro de la función. /*plugin*/ this.animate({left: "-=30"}).css({fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, position: "relative"}).animate({left: "+=30"}, function(){callback();}); /*plugin*/
  • 16.  El plugin completo ... $.fn.fuente = function(options, callback) { var defaults = { fontSize : "18px", fontFamily: "arial" } var options = $.extend(defaults, options); if (callback === undefined) { callback = function(){}; } /*plugin*/ this.animate({left: "-=30"}).css({fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, position: "relative"}).animate({left: "+=30"}, function(){callback();}); /*plugin*/ //Averigua si el parámetro contiene una función //de ser así llamarla if($.isFunction(options.onComplete)) { options.onComplete.call(); } };
  • 17.  Haciendo uso del nuevo plugin fuente() ... $(function(){ $("#default").click(function(){ $("#caja").fuente(); }); $("#lucida_console").click(function(){ $("#caja").fuente({fontSize: "18px", fontFamily: "'Lucida Console'"}, function(){$("#resultado").fadeIn(1000).text("Ejecución completada").fadeOut(1000);} ); }); $("#trebuchet").click(function(){ $("#caja").fuente({fontSize: "19px", fontFamily: "trebuchet"}, function(){$("#resultado").show(1000).text("Ejecución completada").hide(1000);} ); }); $("#verdana").click(function(){ $("#caja").fuente({fontSize: "16px", fontFamily: "Verdana"}, function(){$("#resultado").slideDown(1000).text("Ejecución completada").slideUp(1000);} ); }); });
  • 18.  Y el cuerpo HTML ... <input type="button" id="default" value="default"> <input type="button" id="lucida_console" value="Lucida Console"> <input type="button" id="trebuchet" value="Trebuchet"> <input type="button" id="verdana" value="Verdana"> <div id="resultado"></div> <div id="caja"><h1>Función Jquery con opciones y callback()</h1></div>
  • 19. Video tutorial de Jquery “Introducción a la programación”

×