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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mume JQueryMobile Intro

301

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
301
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

×