20111014 mu me_j_querymobile

  • 509 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
509
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MultimediajQuery Mobile Erik Duval Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
  • 2. http://www.slideshare.net/erik.duval2
  • 3. wat denken jullie? 3
  • 4. built on jQuery & jQuery UI 4
  • 5. http://jquerymobile.com/demos/1.0rc1/ 5
  • 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
  • 15. http://jquery.com/
  • 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 fromhttp://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/orhttp://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/ 20
  • 21. Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 21