20111014 mu me_j_querymobile

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 Ofﬁcially Supported – May work, but haven’t been thoroughly tested or debugged 8

<!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• ﬂip 14

http://jquery.com/

jQuery• ﬁnd something in HTML• do something to it 16

$(“#content”) get element with id content$(“li:ﬁrst”) get ﬁrst 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: ﬁnd(), 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

20111014 mu me_j_querymobile

by Erik Duval

Accessibility

Categories

Upload Details

Usage Rights

Statistics

20111014 mu me_j_querymobile Presentation Transcript