MultimediajQuery Mobile            Erik Duval   Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
http://www.slideshare.net/erik.duval2
wat denken jullie?        3
built on jQuery & jQuery UI           4
built on jQuery & jQuery UI           4
http://jquerymobile.com/demos/1.0rc1/                  5
optimized for touch         6
mobile events• tap• taphold          • orientationchange• swipe            • scrollstart• swipeleft        • scrollstop• s...
progressive enhancement• ‘graceful degradation’• A-grade – Full enhanced experience with Ajax-  based animated page transi...
9
<!DOCTYPE html><html>  <head>  <title>jQuery Mobile: Pages within Pages</title>  <link rel="stylesheet" href="http://code....
<div data-role="page">    <div data-role="header">         <h1>Page Title</h1></div>    <div data-role="content">         ...
<body><div data-role="page" id="home">  <div data-role="header"><h1>Home</h1></div>  <div data-role="content"><a href="#ab...
• “auto-ajax” to pre-fetch content pages• does not include GPS, canvas, local storage, ...                       13
transition effects• slide• slideup• slidedown• pop• fade• flip              14
http://jquery.com/
jQuery• find something in HTML• do something to it                  16
$(“#content”) get element with id content$(“li:first”) get first list item$(“tr:odd”) get odd numbered table rows$(“a[target...
methods•   Moving Elements: append(), appendTo(), before(), after(),•   Attributes: css(), attr(), html(), val(), addClass...
resources & thx•   http://jquerymobile.com/•   http://www.jqmgallery.com/•   http://www.elated.com/articles/jquery-mobile-...
Over to ... you!Start fromhttp://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/orhttp://www.elated.com/...
Questions?http://erikduval.wordpress.com/       twitter: @ErikDuval               21
Upcoming SlideShare
Loading in...5
×

Mume JQueryMobile Intro

326

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
326
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mume JQueryMobile Intro"

  1. 1. MultimediajQuery Mobile Erik Duval Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
  2. 2. http://www.slideshare.net/erik.duval2
  3. 3. wat denken jullie? 3
  4. 4. built on jQuery & jQuery UI 4
  5. 5. built on jQuery & jQuery UI 4
  6. 6. http://jquerymobile.com/demos/1.0rc1/ 5
  7. 7. optimized for touch 6
  8. 8. mobile events• tap• taphold • orientationchange• swipe  • scrollstart• swipeleft  • scrollstop• swiperight 7
  9. 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. 10. 9
  11. 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. 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. 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. 14. • “auto-ajax” to pre-fetch content pages• does not include GPS, canvas, local storage, ... 13
  15. 15. transition effects• slide• slideup• slidedown• pop• fade• flip 14
  16. 16. http://jquery.com/
  17. 17. jQuery• find something in HTML• do something to it 16
  18. 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. 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. 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. 21. 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
  22. 22. Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 21
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×