Mume JQueryMobile Intro
0 likes685 views
This document discusses jQuery Mobile, a mobile web framework built on jQuery and jQuery UI. It is optimized for touch interactions and uses progressive enhancement to provide a good experience across different mobile device capabilities. Key features highlighted include support for mobile events like tap and swipe, navigation between pages within a single HTML document, and transition effects between pages. The document provides code examples and resources for further learning jQuery Mobile.
![$(“#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](https://image.slidesharecdn.com/20121005mumejquerymobilecopy-121026055654-phpapp02/85/Mume-JQueryMobile-Intro-18-320.jpg)
Mume JQueryMobile Intro
- 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
- 5. built on jQuery & jQuery UI 4
- 7. optimized for touch 6
- 8. mobile events • tap • taphold • orientationchange • swipe • scrollstart • swipeleft • scrollstop • swiperight 7
- 9. 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
- 10. 9
- 11. <!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
- 12. <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
- 13. <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
- 14. • “auto-ajax” to pre-fetch content pages • does not include GPS, canvas, local storage, ... 13
- 15. transition effects • slide • slideup • slidedown • pop • fade • flip 14
- 17. jQuery • find something in HTML • do something to it 16
- 18. $(“#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
- 19. 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
- 20. 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
- 21. 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
- 22. Questions? http://erikduval.wordpress.com/ twitter: @ErikDuval 21