Mume JQueryMobile Intro

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

Mume JQueryMobile Intro

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Mume JQueryMobile Intro

Ähnlich wie Mume JQueryMobile Intro (20)

Mehr von Gonzalo Parra

Mehr von Gonzalo Parra (9)

Mume JQueryMobile Intro