JQuery Mobile

Jquery Mobile Scott RyanAugust 2011, Soaring Eagle LLC

AgendaMobile BasicsToolsLayoutsEventsFormsThemes and CSS

OptionsNative HTML Iphone XCode and Jquery Mobile Objective-C JQTouch Android Eclipse and Titanium Jara/XML Sencha Touch RHO Mobile

ToolsMac, IPhone, Ipad, Android DevicesWeb Storm, XCode, EclipseJQuery and JQuery MobileBrowsers Safari, Firefox, Opera, IE, Chrome and Canary Phome Gap

Best PracticesHTML 5Semantic HTMLDesign for AccessibilityProgressive EnhancementBuild for latest feature set and backﬁ&Use standard code structure, clean code and document

Mobile ChallengesHigh demand and expectations with easy accessLimited BandwidthVarying ConnectivityHigh Memory and processing powerLeading Edge PlatformsSo Many platforms

Jquery MobileBuilt on leading edge Jquery LibraryPost processing plugin with DOM ManagementMulti device supportMobile Event Support (swipe, scro&, lists, etc)WAI-ARIA Support for accessibilityPowerful Themes and HTML 5 and CSS support

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <link rel="stylesheet" href="css/jquery/jquery.mobile-1.0b1.min.css"/> <link rel="stylesheet" href="css/main.css"/> <title>Demo JQuery Mobile</title>  <script src="javascript/main.js"></script> <script src="javascript/jquery/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> // Initialize the document here $(document).ready(function() { // Your code here }); </script> <script src="javascript/jquery/jquery.mobile-1.0b1.min.js" type="text/javascript"></script> <script type="text/javascript"> // Update any JQuery mobile settings here $(document).bind("mobileinit", function() { // This is the default anyway $.mobile.ajaxEnabled = true; }); </script></head>

Data RolesLeverage HTML 5 data extensionPage, Header, Content, FooterNavbarbuttonlistviewcontrolgroup

Page StructurePage Page to Page Links Header Inter page links Content Back Links Footer History Page Transitions (pop, fade, ﬂip, slide up and down)

Page Structure

Page Example<section data-role="page" id="main-page"> <header data-role="header"><h1>Jqeury Mobile Demo</h1></header> <div data-role="content"><p>This demo is a very simple set of code.</p> <div style="width:20%;"> <a href="#page-description" data-role="button">Page Description</a> </div> </div> <footer data-role="footer"><h2>Soaring Eagle LLC</h2></footer></section><section data-role="page" id="demo-dialog" data-theme="e"> <header data-role="header"><h1>Demo Dialog</h1></header> <div data-role="content"> <div>This is a basic Dialog example.</div> </div> <footer data-role="footer"><h2>Soaring Eagle LLC</h2></footer></section>

DialogAny page can become a dialogVisua&y diﬀerent than normal pagesNot included in the historydata-rel=”dialog”data-transition=”ﬂip”

LinksAjax by default Same domainNon Ajax tri*ered by External Domain, rel=”external”, target, ajax=falseSpeciality links mailto: , tel:

ThemesCan apply to pages or components Can do subparts (header footer, content) data-theme=”a” or datadivider-theme=”a”Theme builder coming similar to jquery

Tool barsTypes (icons) header (up to 2 buttons with title) footer (variable button count) navbar (up to 5 per line)Position (data-position = “”) ﬁxed and fu& screen

Collapsable Contentdata-role=”co&apsable”data-co&apsed = “true”Can be nestedCan be in sets Like an accordion component data-role=”co&apsable-set”

Form ElementsTouch Enabled and emulated on BrowserStandard Elements (data-role=”none”)Mobile elements (Device based display)data-role=”ﬁeld-contain” Groups label and form element

ListsNormal ListsNumbered ListsCount BubblesIcon enabled listsSearch FiltersDividers

Eventstap , tapholdswipe, swipele+ , swperightorientation changescro& start , scro& stopMore via plugins

Page EventsPagebeforeshow ( pre transition)pagebeforehidepageshow (post transition)pagehidepagebeforecreate (pre init)pagecreate

Misc Methodschangepagesilentscro&pageloadingaddResolutionBreakpoints

CSS SupportOrientation (portrait, landscape)Resolution Breakpoints 320, 480, 768, 1024 min-width:480px

Media Queries$.mobile.media(“screen and (min-width:480px)”);Retina display (iphone) $.mobile.media(“screen and (-webkit-min-device-pixle- ratio:2)”);

PluginsJQtouch (http://jqtouch.com/)swipe supportpinch supportGoogle maps support

Phone GapGeolocation NotiﬁcationsCompass MediaContactsAccelerometerCameraFile System

Phone GapApplication WrapperXCode for Ipad and IPhoneEclipse for AndroidVisual Studio for WindowsNative Packaging and Native Access

Other ToolsRipple Emulator (http://ripple.tinyhippos.com/)Sencha Touch (http://www.sencha.com/products/touch/)Appcelerator (http://www.appcelerator.com)RhoMobile (http://rhomobile.com/)Test Swarm (http://swarm.jquery.org/)Touch Scro& (https://github.com/neave/touch-scro&)

JQuery Mobile

by Soaring Eagle L.L.C. on Aug 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

JQuery Mobile — Presentation Transcript