1 / 24

Jquery Mobile Scott Ryan

Jquery Mobile Scott Ryan. June 2011 Soaring Eagle LLC scott@theryansplace.com. Agenda. Mobile Basics Tools Layouts Events Forms Themes and CSS Misc. Tools. Mac, IPhone and Ipad , Android Devices Web Storm, Eclipse, Spring STS, Xcode Jquery and Jquery Mobile Browsers

stella
Download Presentation

Jquery Mobile Scott Ryan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jquery MobileScott Ryan June 2011 Soaring Eagle LLC scott@theryansplace.com

  2. Agenda Mobile Basics Tools Layouts Events Forms Themes and CSS Misc

  3. Tools • Mac, IPhone and Ipad, Android Devices • Web Storm, Eclipse, Spring STS, Xcode • Jquery and Jquery Mobile • Browsers • Safari (Changeable Agents) • Firefox • Chrome and Canary • Opera • IE • Phone Gap • Emlators

  4. Best Practices HTML 5 Semantic HTML Design for Accessibility Progressive Enhancement Build for latest feature set and backfill Use standard structure Keep code Clean and formatted and leverage inheritance HTML 5 Meetup and other User Groups

  5. Mobile Challenges / Opportunities High Performance Limited Bandwidth Varied connection span High Processing Power High Memory Leading Edge Support SO MANY platforms

  6. Jquery Mobile Built on powerful Jquery Library Provides support for multiple devices Supports WAI-ARIA Mobile Event Support Powerful Theming HTML 5 and CSS 3 Support DOM Management Plugin Framework

  7. Getting Started • See Code • https://github.com/scryan7371/JQuery-Mobile

  8. Data Roles • data-role • page • header • footer • content • navbar • button • listview • controlgroup • fieldcontain

  9. Page Structure • Page • Header • Content • Footer • Inter page links • Page to Page Links • Back links • History access • Transitions (slide up/down, pop, fade, flip)

  10. Dialogs Can apply to any page Not included in history data-rel = “dialog” data-transition=“pop”

  11. Links • Links are Ajax by default • Same Domain and dialogs • Non Ajax behavior • External Domain, rel=“external”, target, ajax=“false” • Email Links • mailto: • Telephone Links • tel:

  12. Themes • Apply to page • Can be applied to sub parts (header, footer) • data-theme=“a” • data-dividertheme="b"

  13. ToolBars • Types • Header (up to 2 buttons and a title • Footer (Variable button count) • Nav Bar (Up to 5 options per line) • Position (data-position =“”) • Fixed • Full Screen • Icons • Themes

  14. Collapsible Content • data-role=“collapsible” • data-collapsed=“true” • Can be nested • Can be in sets • Data-role=“collapsible-set”

  15. Form Elements • Touch Enabled • Standard Elements • data-role=“none” • Mobile Elements • Display based on device • data-role=“fieldcontain” • Groups labels and fields with border

  16. Lists Normal lists Numbered lists Count bubbles Icon enabled lists Search Filters Dividers

  17. Events • Types • tap • taphold • swipe • swiperight • swipeleft • orientationchange • scrollstart • scrollstop • Configuration • bind • live

  18. Page Events Pagebeforeshow (pre transition) Pagebeforehide pageshow (post transition) pagehide pagebeforecreate (pre init) pagecreate

  19. Misc Methods changePage silentScroll pageLoading addResolutionBreakpoints

  20. CSS Help • Orientation • .portrait .landscape • Resolution breakpoints • 320, 480, 768, 1024 • .min-width-480px • Media Queries • $.mobile.media("screen and (min-width: 480px)"); • $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");

  21. Plugins Jqtouch wipe support Google maps Pinch support

  22. phonegap Geolocation Compass Accelerometer Camera Contacts File System Media Notifications Storage

  23. Phonegap Xcode on the mac for development Eclipse for Android Development Packages for multiple devices Emulator support for testing

  24. Other Tools Ripple Emulator Sencha Touch Appcelerator WidgetPad Test Swarm Touch Scroll

More Related