50
Introduction to Laurențiu Macovei DotNetWise [10th of November 2012]

Laurentiu Macovei - jQueryMobile

Embed Size (px)

Citation preview

Page 1: Laurentiu Macovei - jQueryMobile

Introduction to

Laurențiu MacoveiDotNetWise

[10th of November 2012]

Page 2: Laurentiu Macovei - jQueryMobile
Page 3: Laurentiu Macovei - jQueryMobile

=

+ + mobile + .

Page 4: Laurentiu Macovei - jQueryMobile

Lightweight sizejQuery Mobile is 33kb + jQuery = 66kb

Page 5: Laurentiu Macovei - jQueryMobile

OPEN SOURCE, FREE

Page 6: Laurentiu Macovei - jQueryMobile

Just one among the others

http://wp.nu/mobilecompare

Sencha Touch Kendo UI

Page 7: Laurentiu Macovei - jQueryMobile

Aggressively cross-platform, cross-browser

Page 8: Laurentiu Macovei - jQueryMobile
Page 9: Laurentiu Macovei - jQueryMobile

+

Page 10: Laurentiu Macovei - jQueryMobile

Focused on progresive ehnancement and graceful degradation

Page 11: Laurentiu Macovei - jQueryMobile

A-grade - Full enhanced experiencewith Ajax-based animated page transitions.

most browsers

Page 12: Laurentiu Macovei - jQueryMobile

A-grade - Full enhanced experience with Ajax-based animated page transitions.

B-grade - Enhanced experience except without Ajax navigation features.

Blackberry 5.0*, Opera Mini 7, Nokia Symbian^3

Page 13: Laurentiu Macovei - jQueryMobile

A-grade - Full enhanced experience with Ajax-based animated page transitions.

B-grade - Enhanced experience except without Ajax navigation features.

C-grade - Basic, non-enhanced HTML experience that is still functional

Blackberry 4.x, Windows Mobile, all non-CSS media queries

Page 14: Laurentiu Macovei - jQueryMobile

Markup driven minimal code required to get up and

running

Page 15: Laurentiu Macovei - jQueryMobile

Markup driven

Page 16: Laurentiu Macovei - jQueryMobile

Add data-role to decorate elements

Page 17: Laurentiu Macovei - jQueryMobile

Make the footer fixed

Page 18: Laurentiu Macovei - jQueryMobile

Group max 5 buttons in a navbar

Page 19: Laurentiu Macovei - jQueryMobile

Add data-theme=X to apply skins

Page 20: Laurentiu Macovei - jQueryMobile

Add data-rel=back for back button

Page 21: Laurentiu Macovei - jQueryMobile
Page 22: Laurentiu Macovei - jQueryMobile

Add data-role=listview to lists

Page 23: Laurentiu Macovei - jQueryMobile
Page 24: Laurentiu Macovei - jQueryMobile

Add data-role to decorate elements

Page 25: Laurentiu Macovei - jQueryMobile

Add round box text with ui-li-count

Page 26: Laurentiu Macovei - jQueryMobile

Add aside text with class ui-li-aside

Page 27: Laurentiu Macovei - jQueryMobile

Categories with data-role=list-divider

Page 28: Laurentiu Macovei - jQueryMobile

Add data-inset=true for round lists

Page 29: Laurentiu Macovei - jQueryMobile

Add data-filter to enable filtering

Page 30: Laurentiu Macovei - jQueryMobile

Add data-role=fieldcontain in forms

Page 31: Laurentiu Macovei - jQueryMobile

Organize elements with ui-grid and ui-block

Page 32: Laurentiu Macovei - jQueryMobile

Add data-role=controlgroup to group checbokxes or radios

Page 33: Laurentiu Macovei - jQueryMobile

Add data-role to decorate elements

Page 34: Laurentiu Macovei - jQueryMobile

Add class ui-body and ui-body-x to create swatches

Page 35: Laurentiu Macovei - jQueryMobile

Select element is self-enhanced

Page 36: Laurentiu Macovei - jQueryMobile

Add class ui-body and ui-body-x to create swatches

Page 37: Laurentiu Macovei - jQueryMobile

Disable system menu with data-native-menu=false

Page 38: Laurentiu Macovei - jQueryMobile

Rotate the device for a different experience

Page 39: Laurentiu Macovei - jQueryMobile

Every device is different

Page 40: Laurentiu Macovei - jQueryMobile
Page 41: Laurentiu Macovei - jQueryMobile
Page 42: Laurentiu Macovei - jQueryMobile
Page 43: Laurentiu Macovei - jQueryMobile

What’s not included in the boxSingle page templatesMulti page templatesDialogs and PopupsTransitions bweteen pagesAjax pages

Page 44: Laurentiu Macovei - jQueryMobile

Demo LiveCodecamp Feedback application

Page 45: Laurentiu Macovei - jQueryMobile
Page 46: Laurentiu Macovei - jQueryMobile

released on 2 october, 2012

list of almost 200 contributors

Page 47: Laurentiu Macovei - jQueryMobile

Contribute!

Page 48: Laurentiu Macovei - jQueryMobile

Q & A

Page 49: Laurentiu Macovei - jQueryMobile
Page 50: Laurentiu Macovei - jQueryMobile

Diamond Sponsors

Platinum Sponsors Gold Sponsors

Training Partners Media Partners Other Partners