20111014 mu me_j_querymobile
TRANSCRIPT
Multimedia
jQuery Mobile
Erik DuvalDept. Computerwetenschappen
http://www.cs.kuleuven.ac.be/~erikd/
2
http://www.slideshare.net/erik.duval
wat denken jullie?
3
4
built on jQuery & jQuery UI
5
http://jquerymobile.com/demos/1.0rc1/
optimized for touch
6
mobile events
• tap
• taphold
• swipe
• swipeleft
• swiperight
7
• orientationchange
• scrollstart
• scrollstop
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
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 from
http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/
or
http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/
20
21
Questions?
http://erikduval.wordpress.com/twitter: @ErikDuval