24
Jquery Mobile Scott Ryan
Jquery MobileScott RyanJune 2011Soaring Eagle [email protected] BasicsToolsLayoutsEventsFormsThemes and CSSMisc
ToolsMac, IPhone and Ipad, Android DevicesWeb Storm, Eclipse, Spring STS, XcodeJquery and Jquery MobileBrowsersSafari (Changeable Agents)FirefoxChrome and CanaryOperaIEPhone GapEmlatorsBest PracticesHTML 5Semantic HTMLDesign for AccessibilityProgressive EnhancementBuild for latest feature set and backfillUse standard structureKeep code Clean and formatted and leverage inheritanceHTML 5 Meetup and other User Groups
Mobile Challenges / OpportunitiesHigh PerformanceLimited BandwidthVaried connection spanHigh Processing PowerHigh MemoryLeading Edge SupportSO MANY platformsJquery MobileBuilt on powerful Jquery LibraryProvides support for multiple devicesSupports WAI-ARIAMobile Event SupportPowerful Theming HTML 5 and CSS 3 SupportDOM ManagementPlugin FrameworkGetting StartedSee Code https://github.com/scryan7371/JQuery-Mobile
Data Rolesdata-rolepageheaderfootercontentnavbarbuttonlistviewcontrolgroupfieldcontain
Page StructurePageHeaderContentFooterInter page linksPage to Page LinksBack linksHistory accessTransitions (slide up/down, pop, fade, flip)DialogsCan apply to any pageNot included in historydata-rel = dialogdata-transition=popLinksLinks are Ajax by defaultSame Domain and dialogsNon Ajax behaviorExternal Domain, rel=external, target, ajax=falseEmail Linksmailto:Telephone Linkstel:ThemesApply to pageCan be applied to sub parts (header, footer)data-theme=adata-dividertheme="b"ToolBarsTypesHeader (up to 2 buttons and a titleFooter (Variable button count)Nav Bar (Up to 5 options per line)Position (data-position =)FixedFull ScreenIconsThemesCollapsible Contentdata-role=collapsibledata-collapsed=trueCan be nestedCan be in setsData-role=collapsible-setForm ElementsTouch EnabledStandard Elementsdata-role=noneMobile ElementsDisplay based on devicedata-role=fieldcontain Groups labels and fields with borderListsNormal listsNumbered listsCount bubblesIcon enabled listsSearch FiltersDividersEventsTypestaptapholdswipeswiperightswipeleftorientationchangescrollstartscrollstop
ConfigurationbindlivePage EventsPagebeforeshow (pre transition)Pagebeforehidepageshow (post transition)pagehidepagebeforecreate (pre init)pagecreateMisc MethodschangePagesilentScrollpageLoadingaddResolutionBreakpoints
CSS HelpOrientation.portrait .landscapeResolution breakpoints320, 480, 768, 1024.min-width-480pxMedia Queries$.mobile.media("screen and (min-width: 480px)");$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
PluginsJqtouchwipe supportGoogle mapsPinch supportphonegapGeolocationCompassAccelerometerCameraContactsFile SystemMediaNotificationsStorage
PhonegapXcode on the mac for developmentEclipse for Android DevelopmentPackages for multiple devicesEmulator support for testing
Other ToolsRipple EmulatorSencha TouchAppceleratorWidgetPadTest SwarmTouch Scroll
