Download to read offline
![$(“#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)
![$(“#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/75/Mume-JQueryMobile-Intro-18-2048.jpg)
Uploaded byGonzalo Parra
Mume JQueryMobile Intro
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.
More Related Content
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Mume JQueryMobile Intro
Mume JQueryMobile Intro
- 1. Multimedia jQuery Mobile Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
- 2.
- 3.
- 4. built on jQuery& jQuery UI 4
- 5. built on jQuery& jQuery UI 4
- 6.
- 7.
- 8. mobile events • tap •taphold • orientationchange • swipe • scrollstart • swipeleft • scrollstop • swiperight 7
- 9. progressive enhancement • ‘gracefuldegradation’ • 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.
- 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"> <divdata-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” topre-fetch content pages • does not include GPS, canvas, local storage, ... 13
- 15. transition effects • slide •slideup • slidedown • pop • fade • flip 14
- 16.
- 17. jQuery • find somethingin HTML • do something to it 16
- 18. $(“#content”) get elementwith 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