Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (13)
Semelhante a 20111014 mu me_j_querymobile
Semelhante a 20111014 mu me_j_querymobile (20)
Mais de Erik Duval
Mais de Erik Duval (20)
Último
Último (20)
20111014 mu me_j_querymobile
- 1. Multimedia jQuery Mobile Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
- 3. wat denken jullie? 3
- 4. built on jQuery & jQuery UI 4
- 6. optimized for touch 6
- 7. mobile events • tap • taphold • orientationchange • swipe • scrollstart • swipeleft • scrollstop • swiperight 7
- 8. progressive enhancement • ‘graceful degradation’ • 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 • Not Officially Supported – May work, but haven’t been thoroughly tested or debugged 8
- 9. 9
- 10. <!DOCTYPE html> <html> <head> <title>jQuery Mobile: Pages within Pages</title> <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/ jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/ jquery.mobile-1.0a1.min.js"></script> </head> 10
- 11. <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> 11
- 12. <body> <div data-role="page" id="home"> <div data-role="header"><h1>Home</h1></div> <div data-role="content"><a href="#about">...</a></div> </div> <div data-role="page" id="about"> <div data-role="header"><h1>About This App</h1></div> <div data-role="content">...! <a href="#home">Go</a></div> </div> </body> 12
- 13. • “auto-ajax” to pre-fetch content pages • does not include GPS, canvas, local storage, ... 13
- 14. transition effects • slide • slideup • slidedown • pop • fade • flip 14
- 16. jQuery • find something in HTML • do something to it 16
- 17. $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows $(“a[target=_blank]”) get all links who’s target is “_blank” $(“form[id^=step]”) get all forms who’s id starts with “step” Chaining $(“#myId, .myClass, table”) $(“div”).addClass(“redbox”).fadeOut(); $(...).html(function(i){return “<p>hello “ + i + “</p>”;}); 17
- 18. methods • Moving Elements: append(), appendTo(), before(), after(), • Attributes: css(), attr(), html(), val(), addClass() • Events: bind(), trigger(), unbind(), live(), click() • Effects: show(), fadeOut(), toggle(), animate() • Traversing: find(), is(), prevAll(), next(), hasClass() • Ajax: get(), getJSON(), post(), ajax(), load() 18
- 19. resources & thx • http://jquerymobile.com/ • http://www.jqmgallery.com/ • http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/ • http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/ • http://docs.jquery.com/Tutorials • http://www.slideshare.net/1Marc/jquery-essentials 19
- 20. Over to ... you! Start from http://miamicoder.com/2011/creating-a-website-using- jquery-mobile-part1/ or http://www.elated.com/articles/jquery-mobile-what-can- it-do-for-you/ 20
- 21. Questions? http://erikduval.wordpress.com/ twitter: @ErikDuval 21