Your SlideShare is downloading. ×
Mume JQueryMobile Intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mume JQueryMobile Intro

274
views

Published on


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

  • Be the first to like this

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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. built on jQuery & jQuery UI 4
  • 6. http://jquerymobile.com/demos/1.0rc1/ 5
  • 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
  • 16. http://jquery.com/
  • 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 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. Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 21