20111014 mu me_j_querymobile

Multimedia

jQuery Mobile

Erik Duval
Dept. Computerwetenschappen
http://www.cs.kuleuven.ac.be/~erikd/

http://www.slideshare.net/erik.duval

2

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

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 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

Questions?
http://erikduval.wordpress.com/
twitter: @ErikDuval
21

20111014 mu me_j_querymobile

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (13)

Similaire à 20111014 mu me_j_querymobile

Similaire à 20111014 mu me_j_querymobile (20)

Plus de Erik Duval

Plus de Erik Duval (20)

Dernier

Dernier (20)

20111014 mu me_j_querymobile