Daniel CousineauInteractive Software Engineer @ RAPPhttp://dcousineau.com/@dcousineaudcousineau@gmail.com
What Is jQuery Mobile?
Multi PlatformImages from jquerymobile.com
Touch-optimized & ThemableImages from jquerymobile.com
Mobile Web FrameworkUnified User InterfaceMy Term: Half StackWidget LibraryTouch Events
Project Status As of October 19th, 2011: RC2 This talk centers around RC1
More DetailsBuilt on jQueryLightweight (12k compressed)Progressive EnhancementHTML5Accessibility baked-in (WAI-ARIA)Modular & Theme-able
jQuery Mobile Primer
ProvidedInterface elementsSimple device orientation detectionTap & mobile eventsDOES NOT PROVIDE Geo Location, Canvas, LocalStorage, etc. Remember: A ‘HALF’ STACK
Think In Pages<div data-role=”page” />Only 1 visible at any timeMultiple allowed per document You can write a single-file applicationContains header, footer, and content area
Progressive EnhancementUses the HTML5 data-* attributes to auto-enhanceand configure widgetsdata-role is now the center of your world.E.g. To create a button, add a <a href=”#” data-role=”button”>LABEL</a> and jQuery Mobile willautomagically set it up during page creation.
Auto-‘AJAX’By default, all local links get a click listenerCan be disabledOverrides default action: Fires XMLHTTP request for target Pulls <div data-role=”page”></div> from results, inserts into DOM Transitions to displaying the new target page
Auto-‘AJAX’By default, all local forms get a submission handlerSame process as links, only overriding for form submit
Auto-‘AJAX’CAUTION: There is no baked-in way to passparameters to AJAX’ed pagesSever side via GET requests to back-endUse #page?key=value, manually parse window.locationDisable / override hash listener