20111014 mu me_j_querymobile
Upcoming SlideShare
Loading in...5
×
 

20111014 mu me_j_querymobile

on

  • 636 views

 

Statistics

Views

Total Views
636
Slideshare-icon Views on SlideShare
636
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20111014 mu me_j_querymobile 20111014 mu me_j_querymobile Presentation Transcript

    • 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
    • http://jquerymobile.com/demos/1.0rc1/ 5
    • optimized for touch 6
    • mobile events• tap• taphold • orientationchange• swipe  • scrollstart• swipeleft  • scrollstop• swiperight 7
    • 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
    • <!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
    • <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
    • <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
    • • “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=_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
    • 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
    • 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
    • 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
    • Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 21