CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 9 jQuery MobileMar 1, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, March 1, 2011References2jQuery Mobile documentation, http://jquerymobile.com/demos/1.0a3/Tuesday, March 1, 2011Web Pages Verses Optimized Pages for Mobile3Tuesday, March 1, 2011Web Apps4Tuesday, March 1, 2011Scale5600 * 1024480 * 800Images not to scaleTuesday, March 1, 2011Scale6768 x 1024Tuesday, March 1, 2011Native Verses Cross Platform7Tuesday, March 1, 2011Hand Coded Verses Library8#header ul li a { background-color: #FFFFFF; border: 1px solid #999999; color: #222222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none;}#header ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}#header ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}<body><div data-role="page" data-theme="b"> <div id="jqm-homeheader"> <h1> Hello World! </h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" <li data-role="list-divider">Example</li> <li>List Item</li> <li><a href="page.html">With Link</a></li> </ul> </div></div></body>Tuesday, March 1, 2011Libraries9jQTouchFree with MIT licenseiPhone, iPod Touch, AndroidNo Tablet supportUses jQueryStarted 2009jQuery MobileFreeBased on jQueryUnified interface on most mobile browsersAlpha 3 releaseAnnounced August 2010Sencha TouchiOS & AndroidBlackberry 6 soonNative look & FeelFree for open sourcePer seat cost for commercialDoes not use jQuery Tuesday, March 1, 201110jQuery MobileTuesday, March 1, 201111jQuery MobileFirst public announcement August 2010Currently third alpha releaseCross-platform & Cross-device frameworTuesday, March 1, 201112Planned Browser SupportPlatformNativeBrowserPhoneGapiOSYYSymbian S60 v5.0YYBlackBerry OSv5.0 v 6.0YYAndroidYYWindows MobileNNwebOSYYbadaYNMeeGoYTuesday, March 1, 2011Supported Platforms in Alpha 313Apple iOS (3.1-4.2)iPhone, iPod, iPadAndroid (1.6-2.3)All devicesBlackberry 6Torch, StylePalm WebOS 1.4Pre, PixiOpera Mobile 10.1AndroidOpera Mini 5.02iOS, AndroidFirefox Mobile (beta)AndroidTuesday, March 1, 2011Warning about cache14Sometimes when editing examples I had to refresh page twiceOtherwise got old behavior Tuesday, March 1, 2011Basic jQuery Mobile Structure15Add data-xxx attributes to tagsjQuery JavaScript & CSS uses the attributeTuesday, March 1, 2011Basic Page Structure16<body> <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></body>Use "data-" attributes to mark page elements Tuesday, March 1, 2011Common Head used in Examples17<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Demo</title><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /><script src="http://code.jquery.com/jquery-1.5.min.js"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script></head>Tuesday, March 1, 2011The examples get too big so to save space will only show the head of the examples hereCSS Tagging & Auto-initialization18jQuery mobile adds CSS class and other attributes to tagsDone on startupAttributes change as neededTuesday, March 1, 2011Sample Page19<body> <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></body>Tuesday, March 1, 2011Sample Page with CSS class added20Tuesday, March 1, 2011Themes21Tuesday, March 1, 2011Themes22Tuesday, March 1, 2011Theme per Page23<div data-role="page" data-theme="e"> <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>Tuesday, March 1, 2011Mixing Themes24<div data-role="page" data-theme="e"> <div data-role="header" data-theme="b"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer" data-theme="d"> <h4>Page Footer</h4> </div></div>Tuesday, March 1, 2011Multiple Pages in one File25<body><div data-role="page" data-theme="b" id="first"> <div> <h1>Page 1</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Example</li> <li><a href="#second" >Internal Page</a></li> </ul> </div></div><div data-role="page" id="second"> <div> <h1>Second Page</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Example</li> <li><a href="#first" data-rel="back">Back to page 1</a></li> </ul> </div></div></body>Tuesday, March 1, 2011Multiple Pages in one File26Only one page is displayed at a timeCurrent div "page" given CSS class "ui-page-active"<div class="ui-page ui-body-c ui-page-active" data-theme="b"data-role="page"data-url="first">$.mobile.activePage JavaScript property contains current page Tuesday, March 1, 2011Page Transitions27slideslideupslidedownpopfadeflipTuesday, March 1, 2011Page Transitions28 <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Example</li> <li><a href="#second" >Internal Page</a></li> <li><a href="SinglePage.html" data-transition="flip">Local Page</a></li> <li><a href="http://www.eli.sdsu.edu" data-transition="fade"> www eli</a></li> </ul> </div>Tuesday, March 1, 2011Back29<a href="#first" data-rel="back">Back to page 1</a>Also uses page animation Tuesday, March 1, 2011Page Transitions - Behind the Scene30Out-going page css classesui-page-activeoutflip (page transition)Incoming page css classesui-page-activeinflip (page transition)After transition is donein, out, transitions classes removedout-going page loses ui-page-activeTuesday, March 1, 2011Page loading & URLs31First page loaded normallyRest of
View Full Document
Unlocking...