JQuery Mobile Denver Ignite 2011

Jquery MobileMay 2011Scott Ryan Soaring Eagle [email protected]

Challenges

Mobile Challenges• Bandwidth• Connectivity• Time to Market• Delivery Mechanisms• Distribution

Mobile Challenges• Operating Systems• Devices• Native Feature access• Orientation related issues• Real Estate• Events• Input• Window depth

There is a market !!!

There is an Answer

Jquery Mobile• Late Beta• Leverages Jquery• Integrates HTML 5, JavaScript and CSS• Lightweight (12K)• Progressive Enhancement• Accessibility

Support

Events

Events• Tap• Tap and hold• Swipe (any, left and right)• Orientation change (media queries and CSS support)• Scroll Events (start and stop)• Page Events • (before show, show, before hide, hide, before create, create)

Themes

Themes• Leverages CSS 3 to reduce size• Gradients, Corner Rounding etc.• Object oriented with 26 swatches• Large variety of swatch combinations

• Icon set included

Page Structure

Pages• Combination Pages• Leverage the data attribute (i.e. data-role)• Header , Content and Footer• Multiple logical pages per physical pages

<div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header -->

<div data-role="content"> <p>Page content goes here.</p> </div><!-- /content -->

<div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer -->

</div>

Forms

Form Elements

And the Kitchen Sink• Transitions• Ajax and History• List support• Dialogs• Menus• Toolbars• Grids• Content Blocks

Bridging the Gap

Detailed Presentations• Upcoming• Denver HTML 5 User’s Group (July 2011)• Boulder Java User’s Group (July 2011)• Denver Open Source User’s Group (October 2011)• Colorado Springs Open Source User’s Group (October 2011)• Cold Fusion User’s Group (June 7, 2011)

Photo Credits• Highway Photo • Phone Image Phonegap.com• Phone Gap Image phonegap.com• Crowd Photo by alexkess• Disney Photo by Express Monorail• Building Structure by Del~Uks• Cat in Sink by sunside