• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mume JQueryMobile Intro
 

Mume JQueryMobile Intro

on

  • 507 views

 

Statistics

Views

Total Views
507
Views on SlideShare
507
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    Mume JQueryMobile Intro Mume JQueryMobile Intro 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
    • 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