Jquery 2
Descargar como PPTX, PDF0 recomendaciones934 vistas
Este documento contiene información sobre jQuery, una biblioteca JavaScript popular. Se describe a jQuery UI como una biblioteca de componentes reutilizables que agrega widgets y efectos a jQuery. También se mencionan plugins de jQuery, jQuery Mobile para desarrollo móvil, y se proporcionan enlaces de referencia adicionales.
![1 PROTOTYPE
Para empezar, debemos dejar a un lado todo lo que sabemos de programación
Orientada a objetos. Todo en javascript son objetos, un arreglo en javascript es
simplemente un objeto con valores y métodos como push o pop.
1. var myArray = [1, 2];
2. myArray.push(3);
3. myArray.reverse();
4. myArray.pop();
5. var length = myArray.length;](https://image.slidesharecdn.com/jqueryacademy2-120522081410-phpapp02/85/Jquery-2-2-320.jpg)
Jquery 2
- 1. Parte 2 Ing. César Eduardo Suárez Trujillo
- 2. 1 PROTOTYPE Para empezar, debemos dejar a un lado todo lo que sabemos de programación Orientada a objetos. Todo en javascript son objetos, un arreglo en javascript es simplemente un objeto con valores y métodos como push o pop. 1. var myArray = [1, 2]; 2. myArray.push(3); 3. myArray.reverse(); 4. myArray.pop(); 5. var length = myArray.length;
- 3. Javascript es un lenguaje que no maneja clases y es un lenguaje muy dinámico que me permite agregar métodos a un objeto según sea necesario. var point = { x : 10, y : 5, add: function(otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y; } }; Este ejemplo ilustra un objeto que representa un punto y también contiene un método para agregarlo.
- 4. Este método estaría en cada una de las implementaciones de cada punto. Por memoria es mejor tener una implementación del método agregar que sea compartida por cada uno de los objetos.
- 5. Revisando un arreglo desde la consola, tenemos lo siguiente:
- 7. Podríamos crear entonces un objeto que simplemente se comporte como un arreglo, de la siguiente forma // Objeto vacio var obj = {}; // herededa el mismo prototype de una objeto array obj.__proto__ = Array.prototype; // Podemos invocar el metodo push obj.push(3); Esto realmente viene siendo lo siguiente var o = new Array(); o.push(3);
- 8. Tenemos el siguiente ejemplos: var casita =function (color){ this.color=color; this.abrirPuerta=function(){ console.log("abrio"+this.color); } } var casa1=new casita("rojo"); casa1.abrirPuerta(); var casa2=new casita("verde"); casa2.abrirPuerta();
- 9. En un diagrama esto se vería de la siguiente forma: color abripuerta casa1 Casita.prot color otype abripuerta casa2 Prototype casita
- 10. Implementando nuestro método de abrirpuerta, obtendríamos lo siguiente var casita =function (color){ this.color=color; } Casita.prototype.abrirPuerta=function(){ console.log("abrio"+this.color); } var casa1=new casita("rojo"); casa1.abrirPuerta(); var casa2=new casita("verde"); casa2.abrirPuerta();
- 12. color casa1 abripuerta Casita.prot color otype casa2 Prototype
- 13. 2 JQUERY UI Biblioteca de componentes reusables para el framework jQuery, que añaden un conjunto de plugins, widgets y efectos. http://jqueryui.com/
- 14. Principales elementos: Draggable Droppable Interacciones Resizable Selectable Sortable Accordion Autocomplete Button Widgets Datepicker Dialog Progressbar Slider Tabs
- 15. Utilidades Position Widget Effect Show Hide Toggle Color Efectos Animation Add Class Remove Class Toggle Class Switch class
- 16. Drag and Drop Jquery UI provee la funcionalidad de arrastrar elementos por todo el documento usando su método draggable(). Para definir un elemento como destino de un objeto que se arrastra se utiliza el método droppable().
- 17. Resizable Este método nos provee la posibilidad de cambiar el tamaño de los elementos dinámicamente de cara al usuario. Esta requiere adicionar el tema css que viene una lalibreria. $( "#resizable" ).resizable();
- 18. Sortable Con este método podemos reorganizar los elementos dentro de este(en cuanto a posición) arrastrando cada uno de los elementos que se quiere reubicar. $( "#sortable" ).sortable();
- 19. Widgets Los widgets son una pequeñas aplicaciones que tiene unas funcionalidades especificas. jQuery UI tienes las siguientes: Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
- 20. Acordion Me permite crear una serie de secciones, que se van desplegando según interactúe sobre los cabezotes de estas
- 21. Efectos Los efectos de la librería jQuery standard son realmente limitados por no decir que se limitan a uno solo. jQuery UI nos trae muchísimas mas posibilidades y nos da la posibilidad también de realizar animaciones de color (transiciones de color)
- 22. 3 PLUGINS Algo elemental es que, creo que el mundo no necesita mas slider plugins , aunque no quiere decir que no podamos hacer el nuestro y saber como hacer un puglin
- 23. Hay dos objetos que podemos extender, de entre los cuales debemos elegir según sea su fin: 1-El objeto jQuery se extiende cuando se necesita crear una función genérica que no necesita interactuar con los elementos DOM de la página. Cuando creamos una función bajo este objeto, la forma de llamarlo es $.mifuncion. Ejemplos de este tipo de funciones, tenemos por ejemplo las funciones de Ajax como $.post 2-El objeto jQuery.fn se extiende cuando queremos añadir métodos al “wrap” que jQuery hace a los objetos DOM. Cuando añadimos una función a este objeto, la forma de llamarlo sería $(domElement).mifuncion().
- 24. El método extend() es el método que nos permite incrementar la funcionalidad de jQuery, pues todo el código de nuestro plugin debe de ir definido dentro de él. jQuery.fn.extend( red: function(){ /*Código aquí*/ }; );
- 25. Este mini plugin nos pintara todos los elementos que invoquemos con este método de color gris. jQuery.fn.extend({ colorear: function(){ /*Recorre todos los elementos encapsulados*/ this.each(function(){ /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento DOM por el que se está pasando*/ jQuery(this).css("color",”#CCC"); }); } });
- 26. USANDO PLUGINS DE TERCEROS En la mayoría de casos usar plugins de terceros es la salida rápida en nuestros proyectos. Esta es una lista de algunos muy útiles en nuestros proyectos. Paginas con listas de plugins http://www.1stwebdesigner.com/css/jquery-plugins-2011/ http://www.smashingapps.com/2011/12/26/best-of-2011-best- useful-jquery-plugins-and-tutorials.html http://savedelete.com/100-best-jquery-plugins-sorted-by-kind.html http://www.webdesignerwall.com/demo/jquery/
- 27. 4 JQUERY MOBILE jQuery mobile es el framework de javascript para desarrollo de aplicaciones web para moviles basado en en jQuery.
- 28. CARACTERISTICAS • jQuery Mobile se puede considerar como un plugin de jQuery, por tanto su forma de trabajo es la mismas. • Nos brinda herramientas para construir sitios web para móviles (no solo código javascript) HTML y CSS. • Soporte completo de HMTL5 • Eventos de gestos (tacto) • Maneja temas como jQueryUI • Plataformas compatibles:
- 29. PRIMERO PASOS jQuery Mobile provee una serie de interfaces graficas con soporte de eventos táctiles y un sistema de navegación animado basado potencializado con AJAX. Es un documento HTML5 por tanto inicia como tal <!DOCTYPE html> Bueno y seguimos con los scripts necesarios <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile- 1.1.0.min.js"></script> </head>
- 30. Las paginas son div cuto atributo data-role es igual a page. Un documento puede tener múltiples paginas y esta se identificaran simplemente con el ID <div data-role="page"> ... </div> Elementos básicos internos <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
- 31. Tenemos que saber que existen dos tipos de llamados. Uno que son links “internos” y los links externos. Los links internos son realmente paginas que se crean en el mismo documentos html y tiene un identificador, se invocan con #id y pueden tener efectos a la hora de ser llamadas y al ser internas no requieren una recarga de la pagina. Lo links externos se tiene que expesificarse de la siguiente forma <a href="multipage.html" rel="external">Link</a> http://www.smdigital.com.co/clientes/pruebamovil/
- 33. CREACIÓN DE NUESTROS TEMPLATES http://jquerymobile.com/themeroller/
- 34. DUDANDO DE JQUERY Escoger un framework no implica un matrimonio, simplemente un punto de partida para que todos en el equipo hablemos el mismo idioma. Dentro de los frameworks más populares, jQuery no es precisamente el más rápido, tampoco el mas lento, pero si el más popular . Podremos ver una prueba de velocidad en este link (aun no he visto una que tenga la ultima version de jQuery) http://mootols.net/slickspeed/
- 35. 9 REFERENCIAS Y OTRO LINKS • Jquery.com • http://jquerymobile.com/ • Wikipedia.com • Javascript and CSS Development with jQuey –Richard York • http://addictedtonew.com/archives/414/creating-a-jquery- plugin-from-scratch / • http://www.cristalab.com/tutoriales/crear-plugins-para-jquery- c251l/ • http://msdn.microsoft.com/en-us/magazine/ff852808.aspx
- 36. • http://fgnass.github.com/spin.js/ (cargador hecho sin imagenes) • http://embeddedjs.com/ • http://www.linkedin.com/groups/jQuery- 100943?home=&gid=100943&trk=anet_ug_hm / Grupo de Linkedin • http://knockoutjs.com/ • https://github.com/BorisMoore/jsrender • http://www.codiqa.com/ • http://addictedtonew.com/archives/414/creating-a-jquery-plugin- from-scratch/