Download as PDF, PPTX
![$(“#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/20111014mumejquerymobile-111014085749-phpapp01/75/20111014-mu-me_j_querymobile-17-2048.jpg)
Uploaded byErik Duval
20111014 mu me_j_querymobile
This document discusses jQuery Mobile, a framework for building mobile web sites and apps. It is built on jQuery and jQuery UI and optimized for touch interactions. Key features highlighted include support for mobile events like tap and swipe, progressive enhancement to provide graceful degradation across devices, and animated page transitions using Ajax. jQuery Mobile uses a multi-page template structure and supports transition effects between pages. The document provides examples of jQuery Mobile markup and methods for selecting and manipulating page elements with jQuery. Resources for learning more about jQuery Mobile are also listed.
More Related Content
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 20111014 mu me_j_querymobile
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
20111014 mu me_j_querymobile
- 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.
- 6.
- 7. mobile events • tap •taphold • orientationchange • swipe • scrollstart • swipeleft • scrollstop • swiperight 7
- 8. 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
- 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"> <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
- 13. • “auto-ajax” topre-fetch content pages • does not include GPS, canvas, local storage, ... 13
- 14. transition effects • slide •slideup • slidedown • pop • fade • flip 14
- 15.
- 16. jQuery • find somethingin HTML • do something to it 16
- 17. $(“#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
- 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