Diferencia entre revisiones de «Usuario:Juanda/phonegap/jquerymobile»
De WikiEducator
(→Proyecto Hola Mundo) |
|||
(61 revisiones intermedias por el mismo usuario no mostrado) | |||
Línea 1: | Línea 1: | ||
+ | {{TEP}} | ||
{{Usuario:juanda/phonegap/nav }} | {{Usuario:juanda/phonegap/nav }} | ||
− | {{#widget:Slides}} {{MiTitulo| Curso de | + | {{#widget:Slides}} {{MiTitulo| Curso de PhoneGap}} |
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
<div class="slide"> | <div class="slide"> | ||
− | = | + | |
+ | = jQuery Mobile = | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | === | + | ==Introducción== |
− | + | ||
</div> | </div> | ||
− | |||
<div class="slide"> | <div class="slide"> | ||
− | === | + | ==== ¿Qué es jQuery Mobile==== |
− | * | + | *Framework para crear intefaces de usuario basadas en HTML5 |
− | * | + | :-Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores. |
− | * | + | :-Write less, do more (jQuery) |
+ | :-Diseño atractivo "out of the box": hacen diseñador al programador. | ||
+ | *Construido a partir de la librería jQuery y de jQueryUI | ||
+ | *Orientado especificamente para móviles | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | *Algunos ejemplos: | ||
+ | :[http://m.ikea.com/es/ Web móvil de Ikea] | ||
+ | :[http://m.disneyworld.disney.go.com/ Disney World] | ||
+ | :[http://www.moulinrouge.fr/ Moulin Rouge] | ||
+ | :[http://m.stanford.edu/ Universidad de Stanford] | ||
+ | :[http://www.jqmgallery.com/ Y muchos más] | ||
+ | *Para ver las páginas correctamente: | ||
+ | :Instala la extensión para Chrome Google Chrome to Phone para ver las páginas en el móvil | ||
+ | :Cambia el user-agent del navegador (lo más fácil es mediante las Chrome Developer Tools). | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ==== Diseños responsivo ==== | ||
+ | * Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características. | ||
+ | * Grid fluido, especificando sus elementos mediante unidades relativas. | ||
+ | * Imágenes y media también en unidades relativas. | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | === | + | |
− | + | ==== Diseño responsable==== | |
− | + | *Se utiliza el criterio "mobile first": | |
− | : | + | :Diseños sencillos |
− | : | + | :Diseños más complejos mediante media queries y siempre con un min-width |
− | + | :Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G. | |
− | : | + | *Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, [http://blogs.perficient.com/spark/2013/01/30/responsive-images-the-new-hotness/ ver ejemplo] |
− | * | + | *Uso de versiones minified y gzip |
− | + | ||
− | + | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
− | === | + | ====Ejemplo CSS Mobile First==== |
− | * | + | * Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla. |
− | + | * Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto) | |
− | * | + | *Aplicaciones Web accesibles via navegador |
− | <source lang=" | + | <source lang="css"> |
− | + | /* Start with core styles outside of a media query that apply to mobile and up */ | |
− | + | /* Global typography and design elements, stacked containers */ | |
− | + | body { font-family: Helvetica, san-serif; } | |
− | + | H1 { color: green; } | |
− | + | a:link { color:purple; } | |
− | + | ||
− | + | /* Stack the two content containers */ | |
− | + | .main, | |
− | + | .sidebar { display:block; width:100%; } | |
− | + | ||
+ | /* First breakpoint at 576px */ | ||
+ | /* Inherits mobile styles, but floats containers to make columns */ | ||
+ | @media all and (min-width: 36em){ | ||
+ | .main { float: left; width:60%; } | ||
+ | .sidebar { float: left; width:40%; } | ||
} | } | ||
+ | /* Second breakpoint at 800px */ | ||
+ | /* Adjusts column proportions, tweaks base H1 */ | ||
+ | @media all and (min-width: 50em){ | ||
+ | .main { width:70%; } | ||
+ | .sidebar { width:30%; } | ||
+ | |||
+ | /* You can also tweak any other styles in a breakpoint */ | ||
+ | H1 { color: blue; font-size:1.2em } | ||
+ | } | ||
</source> | </source> | ||
+ | |||
</div> | </div> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ==Aplicación Web con jQueryMobile== | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Ficheros y documentación==== | ||
+ | *Visitar [http://jquerymobile.com/download/ página jQueryMobile] para su descarga. | ||
+ | *Leer el tutorial que incluye. | ||
+ | *Utilizaremos un CDN: | ||
+ | <source lang="bash"> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Plantilla==== | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE HTML> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset='utf-8'> | ||
+ | <title></title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- Página--> | ||
+ | <div data-role="page"> | ||
+ | <!--Aquí iría nuestra página jQuery Mobile --> | ||
+ | </div> | ||
+ | <!-- Fin página --> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Atributo data-role==== | ||
+ | *Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web. | ||
+ | *Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo1.html analiza su comportamiento]: | ||
+ | |||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE HTML> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset='utf-8'> | ||
+ | <title>Primera Web con jQuery Mobile</title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- Página--> | ||
+ | <div data-role="page"> | ||
+ | |||
+ | <!-- Cabecera --> | ||
+ | <div data-role="header"> | ||
+ | <h1>Título de la página</h1> | ||
+ | </div> | ||
+ | |||
+ | <!-- Body --> | ||
+ | <div data-role="content"> | ||
+ | <p>El contenido de la página va aquí.</p> | ||
+ | </div> | ||
+ | |||
+ | <!-- Pie página --> | ||
+ | <div data-role="footer"> | ||
+ | <h4> Contenido en el pie de la página</h4> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <!-- Fin página --> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ====Estructura aplicación==== | ||
+ | *Una aplicación tiene varias páginas y cajas de diálogo. | ||
+ | *Mediante jQuery Mobile se definirán todas en la misma página html. | ||
+ | *Cada página se puede abrir mediante un botón, que definirá su comportamiento mediante los atributos data-rel y data-transition: | ||
+ | <source lang="html4strict"> | ||
+ | <a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop"> | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | *Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo2.html analiza su comportamiento]: | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>jQuery Mobile Demo</title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- Página 1--> | ||
+ | <div data-role="page" id="main"> | ||
+ | <div data-role="header"> | ||
+ | <h1> | ||
+ | Página 1 | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <h1> | ||
+ | Ejemplo de páginas con jQueryMobile | ||
+ | </h1> | ||
+ | <a data-role="button" href="#page2">Ver página 2</a> | ||
+ | <a data-role="button" href="#dialog1" data-rel="dialog" data-transition="pop">Ver página 3</a> | ||
+ | </div> | ||
+ | <div data-role="footer"> | ||
+ | <h4> | ||
+ | Pie de página 1 | ||
+ | </h4> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Fin página 1 --> | ||
+ | |||
+ | <!-- Página 2--> | ||
+ | <div data-role="page" id="page2" data-add-back-btn=”true”> | ||
+ | <div data-role="header"> | ||
+ | <h1> | ||
+ | Segunda página | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <h1> | ||
+ | Contenido de la segunda página | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="footer"> | ||
+ | <h4> | ||
+ | Pie de página 2 | ||
+ | </h4> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Fin página 2 --> | ||
+ | |||
+ | |||
+ | <!-- Página 3 --> | ||
+ | <div data-role="page" id="dialog1"> | ||
+ | |||
+ | <div data-role="header"> | ||
+ | <h1> | ||
+ | Tercera página | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <h1> | ||
+ | Está página se abre como modal debido al atributo data-rel del botón. | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="footer"> | ||
+ | <h4> | ||
+ | Pie de la ventana modal | ||
+ | </h4> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Fin página 3 --> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | |||
+ | ====Formularios==== | ||
+ | *Los toolbars en header y footer se crean simplemente añadiendo botones | ||
+ | *Los botones son enlaces con los atributos data-role="button" y data-icon="delete" | ||
+ | *El class="ui-bar" en el footer ha servido para añadir padding (ver api de jQueryMobile). | ||
+ | *Los elementos del formulario son los habituales elementos HTML para formularios. | ||
+ | *Cada elemento y su label se agrupan en un data-role="fieldcontain" | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | *Mira el siguiente código y [http://www.media.formandome.es/phonegap/ejemplo3.html analiza su comportamiento]: | ||
+ | |||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>Formulario</title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- Página 1--> | ||
+ | <div data-role="page" id="main"> | ||
+ | <div data-role="header"> | ||
+ | <a href="index.html" data-icon="delete">Cancelar</a> | ||
+ | <h1> | ||
+ | Editar contacto | ||
+ | </h1> | ||
+ | <a href="index.html" data-icon="check">Guardar</a> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <form action="#" method="get"> | ||
+ | <h2> | ||
+ | Formulario básico | ||
+ | </h2> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <label for="name"> | ||
+ | Nombre: | ||
+ | </label> | ||
+ | <input type="text" name="name" id="name" value="" /> | ||
+ | </div> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <label for="textarea"> | ||
+ | Descripción: | ||
+ | </label> | ||
+ | <textarea cols="40" rows="8" name="textarea" id="textarea"> | ||
+ | </textarea> | ||
+ | </div> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <label for="search"> | ||
+ | Buscar: | ||
+ | </label> | ||
+ | <input type="search" name="search" id="search" value="" /> | ||
+ | </div> | ||
+ | </form> | ||
+ | </div> | ||
+ | <div data-role="footer" class="ui-bar"> | ||
+ | <a href="index.html" data-role="button" data-icon="delete">Quitar</a> | ||
+ | <a href="index.html" data-role="button" data-icon="plus">Añadir</a> | ||
+ | <a href="index.html" data-role="button" data-icon="arrow-u">Anterior</a> | ||
+ | <a href="index.html" data-role="button" data-icon="arrow-d">Siguiente</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Fin página 1 --> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | *[http://www.media.formandome.es/phonegap/ejemplo4.html Otro ejemplo] de formulario: | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>jQuery Mobile Demo</title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!-- Main Page--> | ||
+ | <div data-role="page" id="main"> | ||
+ | <div data-role="header"> | ||
+ | <a href="index.html" data-icon="delete">Cancelar</a> | ||
+ | <h1> | ||
+ | Pedir pizza | ||
+ | </h1> | ||
+ | <a href="index.html" data-icon="check">Guardar</a> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <form action="#" method="get"> | ||
+ | <h2> | ||
+ | Formulario para pedir una pizza: | ||
+ | </h2> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <fieldset data-role="controlgroup"> | ||
+ | <legend> | ||
+ | Escoje la base: | ||
+ | </legend> | ||
+ | <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> | ||
+ | <label for="radio-choice-1"> | ||
+ | Fina y crujiente | ||
+ | </label> | ||
+ | <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> | ||
+ | <label for="radio-choice-2"> | ||
+ | Queso gratinado | ||
+ | </label> | ||
+ | <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> | ||
+ | <label for="radio-choice-3"> | ||
+ | Gorda y esponjosa | ||
+ | </label> | ||
+ | </fieldset> | ||
+ | </div> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <fieldset data-role="controlgroup"> | ||
+ | <legend> | ||
+ | Elige los ingredientes de la pizza: | ||
+ | </legend> | ||
+ | <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /> | ||
+ | <label for="checkbox-1a"> | ||
+ | Champiñones | ||
+ | </label> | ||
+ | <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /> | ||
+ | <label for="checkbox-2a"> | ||
+ | Aceitunas negras | ||
+ | </label> | ||
+ | <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /> | ||
+ | <label for="checkbox-3a"> | ||
+ | Pimientos | ||
+ | </label> | ||
+ | <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /> | ||
+ | <label for="checkbox-4a"> | ||
+ | Cebolla | ||
+ | </label> | ||
+ | </fieldset> | ||
+ | </div> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <fieldset data-role="controlgroup" data-type="horizontal"> | ||
+ | <legend> | ||
+ | Ingredientes para no vegetarianos: | ||
+ | </legend> | ||
+ | <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" /> | ||
+ | <label for="checkbox-6"> | ||
+ | Chorizo | ||
+ | </label> | ||
+ | <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /> | ||
+ | <label for="checkbox-7"> | ||
+ | Jamón Serrano | ||
+ | </label> | ||
+ | <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /> | ||
+ | <label for="checkbox-8"> | ||
+ | Carne picada | ||
+ | </label> | ||
+ | </fieldset> | ||
+ | </div> | ||
+ | <div data-role="fieldcontain"> | ||
+ | <fieldset data-role="controlgroup" data-type="horizontal"> | ||
+ | <legend> | ||
+ | Forma de pago: | ||
+ | </legend> | ||
+ | <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" /> | ||
+ | <label for="radio-choice-c"> | ||
+ | Metálico | ||
+ | </label> | ||
+ | <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" /> | ||
+ | <label for="radio-choice-d"> | ||
+ | Cupón | ||
+ | </label> | ||
+ | <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other"/> | ||
+ | <label for="radio-choice-e"> | ||
+ | Tarjeta crédito | ||
+ | </label> | ||
+ | </fieldset> | ||
+ | </div> | ||
+ | </form> | ||
+ | </div> | ||
+ | <div data-role="footer" > | ||
+ | <p>Pizzeria CPIFP Los Enlaces </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ==Eventos en jQueryMobile== | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Sin jQuery Mobile==== | ||
+ | *Normalmente definimos los eventos mediante algún framework, por ejemplo jQuery. | ||
+ | *Evitamos el uso de javascript directamente debido a las diferencias entre navegadores. | ||
+ | *Mira el siguiente código y [http://www.media.formandome.es/phonegap/eventojquery.html analiza su comportamiento]: | ||
+ | <source lang="html4strict" | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | p { color:red; margin:5px; cursor:pointer; } | ||
+ | p:hover { background:yellow; } | ||
+ | </style> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <p>First Paragraph</p> | ||
+ | |||
+ | <p>Second Paragraph</p> | ||
+ | <p>Yet one more Paragraph</p> | ||
+ | <script> | ||
+ | $("p").click(function () { | ||
+ | $(this).slideUp(); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | ====Con jQuery Mobile==== | ||
+ | *Los touch events son distintos a los [http://api.jquery.com/category/events/mouse-events/ eventos tradicionales del ratón]: | ||
+ | *Tap | ||
+ | *Taphold (al menos 1s) | ||
+ | *Swipe (Swipeleft y Swiperight) | ||
+ | *Mira el siguiente código y [http://www.media.formandome.es/phonegap/eventojqmobile.html analiza su comportamiento] (es útil la extensión para'' Chrome Google Chrome to Phone''). | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>Eventos con jQueryMobile</title> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> | ||
+ | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
+ | <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $("#tap").on("tap", function() { | ||
+ | alert("TapEvent"); | ||
+ | }); | ||
+ | $("#taphold").on("taphold", function() { | ||
+ | alert("Tap Hold Event"); | ||
+ | }); | ||
+ | $("#swipe").on("swipe", function() { | ||
+ | alert("Swipe Event"); | ||
+ | }); | ||
+ | $("#swipeleft").on("swipeleft", function() { | ||
+ | alert("Swipe Left Event"); | ||
+ | }); | ||
+ | $("#swiperight").on("swiperight", function() { | ||
+ | alert("Swipe Right Event"); | ||
+ | }); | ||
+ | $(window).on('orientationchange', function(event){ | ||
+ | $("#placeholder").html("Se ha cambiado la orientación a: "+event.orientation); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div data-role="page" id="main"> | ||
+ | <div data-role="header"> | ||
+ | <h1> | ||
+ | Eventos en jQueryMobile | ||
+ | </h1> | ||
+ | </div> | ||
+ | <div data-role="content"> | ||
+ | <h3> | ||
+ | Eventos de cambio de orientación: | ||
+ | </h3> | ||
+ | <h3> | ||
+ | Eventos táctiles: | ||
+ | </h3> | ||
+ | <p id="tap"> | ||
+ | Pulsa aquí | ||
+ | </p> | ||
+ | <p id="taphold"> | ||
+ | Pulsa y manten el dedo al menos 1s | ||
+ | </p> | ||
+ | <p id="swipe"> | ||
+ | Desliza el dedo | ||
+ | </p> | ||
+ | <p id="swipeleft"> | ||
+ | Desliza el dedo hacia la izqda | ||
+ | </p> | ||
+ | <p id="swiperight"> | ||
+ | Desliza el dedo hacia la dcha. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div data-role="footer" class="ui-bar"> | ||
+ | <h1> | ||
+ | Footer | ||
+ | </h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </source> | ||
+ | |||
</div> | </div> |
Última revisión de 04:20 21 feb 2014
Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos. Ver página de charlas. |