Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à El androide y la telaraña móvil
Similaire à El androide y la telaraña móvil (20)
Plus de ykro
Plus de ykro (20)
Dernier
Dernier (11)
El androide y la telaraña móvil
- 1. El androide y la telaraña móvil Adrián Catalán adriancatalan@elementalgeeks.com @ykro
- 2. Demos en http://ykro.net /jqm
- 6. diversión “a lo jQuery” para móviles
- 9. UI Unificada
- 13. Soporte • A-grade – Full enhanced experience with Ajax- based animated page transitions. • B-grade – Enhanced experience except without Ajax navigation features. • C-grade – Basic, non-enhanced HTML experience that is still functional
- 14. Soporte • A-grade – Full enhanced experience with Ajax-based animated page transitions. –Android 2.1 – 2.3 –Android Honeycomb – Apple iOS 3.2 – 5.0 – Windows Phone 7 - 7.5 – Blackberry 6.0 – Blackberry 7 – Blackberry Playbook
- 15. ¿qué me provee jQueryMobile?
- 17. ¿qué NO me provee jQueryMobile?
- 18. Geo / Canvas / Storage
- 27. Dirección de loopback es 10.0.2.2
- 31. ¿Algo más o sólo botones?
- 32. Listas
- 35. Forms
- 41. Eventos
Notes de l'éditeur
- Forget What you think you know
- <html> <head> <title>Hello World</title> <script src="sencha-touch.js" type="text/javascript"></script> <link href="sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> new Ext.Application({ launch: function() { new Ext.Panel({fullscreen: true, html: 'HolaMundo!' }); } }); </script> </head> <body></body></html>
- <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jquery.mobile.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div> </div> </body></html>
- <script type="text/javascript" language="javascript"> $(document).bind("mobileinit", function() { $.extend( $.mobile, { key: value }); } );</script>
- <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div></div>
- <div data-role="page"> <div data-role="header"> <h1>Titulo</h1> </div> <div data-role="content"> <p>Contenido</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div>
- <a href="#" data-role="button">soy un botón</a><a href="#tres" data-rel="dialog">di&aacute;logo</a>
- <a href= "# " data-role="button" data-icon="arrow-l"> arrow-l</a>
- <a href="#" data-role="button" data-icon="plus" data-iconpos="top"> plus</a>
- <ul data-role="listview"> <li>Hugo</li> <li>Paco</li> <li>Luis</li> </ul>
- <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#nx1">Nexus One</a></li> <li><a href="#nxs">Nexus S</a></li> <li><a href="#gn">Galaxy Nexus</a></li></ul>
- <div data-role="fieldcontain"> <label for="comments"> Comentarios:</label> <textarea name="comments" id="comments"></textarea></div>
- <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Mid&iacute;a de la semanafavorito</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Lunes</label> </fieldset></div>
- <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Mid&iacute;a de la semanafavorito</legend> <input type="radio" name="radio-choice-1a" id="radio-choice-1a" value="choice-1" checked="checked" /> <label for="radio-choice-1a">Lunes</label> </fieldset></div>
- <div data-role="fieldcontain"> <fieldset data-role="controlgroup”> <legend>Mid&iacute;a de la semanafavorito</legend> <input type="checkbox" name="cb-choice-1a" id="cb-choice-1a" value="choice-1" checked="checked" /> <label for="cb-choice-1a">Lunes</label> </fieldset></div>
- <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Mid&iacute;a de la semanafavorito</legend> <input type="checkbox" name="cb-choice-1a" id="cb-choice-1a" value="choice-1" checked="checked" /> <label for="cb-choice-1a">Lunes</label> </fieldset></div>
- <script type="text/javascript" language="javascript"> $("#uno").live("tap", function(e) { $("#test").html("Detectadoevento de tap"); });</script><div data-role="page" id="uno"><p id="test">tap, tap, tap</p>
- $("#uno").live("swipe", function(e) { $("#test").append("Swipe<br/>");});$("#uno").live("swipeleft", function(e) { $("#test").append("Izquierda<br/>");});
- $(document).ready(function() { $(window).bind("orientationchange", function(e) { $("#headerText").html(e.orientation); if(e.orientation == "portrait") { $("#small").hide(); $("#fat").show(); } else { $("#small").show(); $("#fat").hide(); } }); });