introduction to jquery mobile - web deliver for all
TRANSCRIPT
![Page 1: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/1.jpg)
Web Delivery for ALL!
![Page 2: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/2.jpg)
!!
jQuery UI Datepicker !
MarcGrabanski.com !
LOTS of UI Dev
Who?Marc Grabanski
![Page 3: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/3.jpg)
!!!
Publisher of:
Currently...UI/UX Development Consultant
http://FrontendMasters.com
![Page 4: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/4.jpg)
The web is for everyone and all can view it
The Great Promise of the Web
![Page 5: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/5.jpg)
![Page 6: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/6.jpg)
Not “Mobile Only” Mobile First
![Page 7: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/7.jpg)
Desktop too!
![Page 8: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/8.jpg)
Source Your Sources
![Page 9: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/9.jpg)
I visited
and talked to
about
![Page 10: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/10.jpg)
Why jQuery Mobile?
![Page 11: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/11.jpg)
4 Main Reasons to Use jQuery Mobile
![Page 12: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/12.jpg)
#1. Ajaxified Navigation
Friendly Ajax URLs
Faster subsequent page loads
![Page 13: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/13.jpg)
#2. Layout and Theming Engine
Quickly style and extend styles
![Page 14: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/14.jpg)
#3 Touch Friendly Inputs
(and widgets)Improved UX for form inputs
![Page 15: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/15.jpg)
#4 Widest Browser Coverage
Web living up to it’s promise
![Page 16: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/16.jpg)
Devices TestedjQuery Mobile Testing Lab
![Page 17: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/17.jpg)
Fully Supported• iOs 3.2+, Android 2.1+/Honeycomb
• Windows Phone 7
• Blackberry 6.0/Playbook
• Palm WebOS 1.4+
• Mobile Opera & Mobile Firefox
• Amazon Kindle 3 & Fire
• Desktop Chrome, FF, IE 7+, Opera
![Page 18: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/18.jpg)
Progressive Enhancement
C-Grade: Basic HTML
B-Grade: Enhanced Style, No Ajax
A-Grade: Full Enhanced Style,
Ajax and CSS Transitions
+++
![Page 19: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/19.jpg)
You’ll always see...something
![Page 20: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/20.jpg)
it’s alive!
![Page 22: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/22.jpg)
and growing...
http://www.google.com/trends/?q=jquery+mobile
![Page 23: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/23.jpg)
Two popular mobile frameworks
“App First”
http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo+mobile,+jqmobi
“Web First”
![Page 24: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/24.jpg)
jQuery Mobile + Adobe
Embedded into Creative Suite Sponsors jQuery Mobile Dev
![Page 26: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/26.jpg)
One More *Magical* File
![Page 27: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/27.jpg)
Get the (Coding)Party
Including Latest: !
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
http://jquerymobile.com/download/
![Page 28: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/28.jpg)
#1 - Ajaxified Navigation
![Page 29: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/29.jpg)
No page refresh?! How does that work?
![Page 30: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/30.jpg)
Looks for href and action in your HTML
![Page 31: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/31.jpg)
Auto-Ajax Links
1. Ajax gets href=”page.html” (unless data-ajax=false)
2. Slides in New Content
3. Updates URL(with <body>...</body> or data-role=page)
![Page 32: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/32.jpg)
/index.html
*click*
![Page 33: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/33.jpg)
/index.html /page.html
*load*
![Page 34: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/34.jpg)
/index.html /page.html
*slide*
![Page 35: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/35.jpg)
/index.html /page.html
*done*
![Page 36: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/36.jpg)
Page Transitions
• <a data-transition=pop>...</a> (slide, slideup, slidedown, pop, fade, flip)
!
• <a data-transition=pop data-direction=reverse>...</a>
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
![Page 37: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/37.jpg)
Default transition is now fade
(more webby)
![Page 38: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/38.jpg)
Pages w/out Ajax<div data-roll=page id=page1>...</div>
<div data-roll=page id=page2>...</div>
!
<a href=”#page1”>Page 1</a>
<a href=”#page2”>Page 2</a>
http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html
![Page 39: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/39.jpg)
No more #/crap/urls.html
Pushstate on Relative URLs/index.html
to /index.html#/foo.html
to /foo.html
![Page 40: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/40.jpg)
1. Form action=”page.html” POST Ajax
2. Slides in New Content
3. Updates URL(same as links)
Auto-Ajax Forms
![Page 41: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/41.jpg)
I don’t use auto-ajax forms. Disable with
data-ajax=false
![Page 42: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/42.jpg)
#2 - Layout and Theming
![Page 43: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/43.jpg)
Looking for data-* attributes
![Page 44: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/44.jpg)
Play a Role
data-role=*
page, header, content, footer, listview, list-divider, button, controlgroup
![Page 45: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/45.jpg)
Structure!
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
![Page 46: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/46.jpg)
Markup
Magical
Zones
<div data-role=header>...</div>
<div data-role=content>...</div>
<div data-role=footer>...</div>
![Page 47: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/47.jpg)
Docs Structure
<div data-role=content>
<div data-role=footer>
<div data-role=page>
![Page 48: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/48.jpg)
Listview
![Page 49: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/49.jpg)
Listview
<ul data-role=listview ...> <li data-role=list-divider>...</li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> <li><a href=”...”></a></li> ...
</ul>
![Page 50: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/50.jpg)
data-* Theme Attributes
• data-theme=[a-f]
• data-[element]theme=[a-f]
• <ul data-dividertheme=[a-f]>
• <ul data-inset=true>
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
![Page 51: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/51.jpg)
List Theming
<ul data-theme=[a-f]>
http://jquerymobile.com/demos/1.2.0/docs/api/themes.html
![Page 52: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/52.jpg)
List Theming
<ul data-theme=b> <li>...</li> <li>...</li> </ul>
![Page 53: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/53.jpg)
Content Themingui-[body|bar]-[a-f]
class=”ui-body ui-body-b”
class=”ui-bar ui-bar-c”
![Page 54: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/54.jpg)
e.g. Docs Theming
<ul data-inset=true data-dividertheme=b ...>
<ul data-inset=true data-dividertheme=f ...>
![Page 55: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/55.jpg)
Responsive Docs Example
class=content-primary
class=content-secondary
MobileTablet and Desktop
![Page 56: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/56.jpg)
jQuery Mobile ThemeRoller
http://jquerymobile.com/themeroller/index.php
![Page 57: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/57.jpg)
Reusable Widgets
![Page 58: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/58.jpg)
Buttons
Link as a button
<a data-role=button ...>slidedown</a>
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-types.html
![Page 59: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/59.jpg)
data-* Button Theming
<button data-icon=*>arrow-r, delete, plus, minus, gear, grid, refresh, etc.
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html
![Page 60: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/60.jpg)
data-* Button Theming
<button data-inline=true>
<button data-icon=delete data-iconpos=right>
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html
![Page 61: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/61.jpg)
Dialog
<a data-rel=dialog>
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dialogs.html
![Page 62: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/62.jpg)
Control Group
<div data-role=controlgroup data-type=horizontal>
<a data-role=button>Yes</a>
<a data-role=button>No</a>
<a data-role=button>Maybe</a>
</div>
http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-grouped.html
![Page 63: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/63.jpg)
Navbardata-role=navbar
http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html
![Page 64: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/64.jpg)
Navbar w/Icons
http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html
![Page 65: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/65.jpg)
Filter Bar
<ul data-filter=true>
http://jquerymobile.com/demos/1.2.0/docs/lists/lists-search.html
![Page 66: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/66.jpg)
http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html
Popup Widget
![Page 67: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/67.jpg)
#3 Touch-friendly Form Inputs
![Page 68: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/68.jpg)
Enhance Form Elements
Default MOBILIZED!
![Page 69: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/69.jpg)
![Page 70: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/70.jpg)
Slider
<input type=range value=50 min=0 max=100>
http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
![Page 71: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/71.jpg)
Search Input
<input type=search>
http://jquerymobile.com/demos/1.2.0/docs/forms/search/
![Page 72: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/72.jpg)
Checkbox Set
http://jquerymobile.com/demos/1.2.0/docs/forms/checkboxes/
![Page 73: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/73.jpg)
Radio Button Set
http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/
![Page 74: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/74.jpg)
Flip Switch<select data-roll=slider>
<option>Switch Off</option>
<option>Switch On</option>
</select>
http://jquerymobile.com/demos/1.2.0/docs/forms/switch/
![Page 75: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/75.jpg)
data-native-menu=true
![Page 76: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/76.jpg)
data-native-menu=false
http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html
![Page 77: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/77.jpg)
Auto Grow Textareas
http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/index.html
![Page 78: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/78.jpg)
HTML5 Input Types (not just jQuery Mobile)
![Page 79: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/79.jpg)
<input type=password>
![Page 80: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/80.jpg)
<input type=number>
![Page 81: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/81.jpg)
<input type=email>
![Page 82: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/82.jpg)
<input type=url>
![Page 83: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/83.jpg)
<input type=tel>
![Page 84: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/84.jpg)
Misc Notes
![Page 85: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/85.jpg)
Widgets• page sections
• checkboxradio
• select
• slider
• textinput
• links
• collapsible
• popup
• controlgroup
• fieldcontain
• fixheaderfooter
• button
• listview
• navbar
• grid
• dialog
![Page 86: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/86.jpg)
Download Builder
http://jquerymobile.com/download-builder/
![Page 87: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/87.jpg)
SnippetsConfigure jQM
$(document).on("mobileinit", function(){
$.extend($.mobile , { foo: bar });
});
New DOM Ready
$(document).on(“pagecreate”, function(e) {
// do somefin’ will ya?
});
![Page 88: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/88.jpg)
Modifying DOM$page .append(“<a data-role=button>Button</a>”) .trigger(‘create’)
Initializes UI components
![Page 89: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/89.jpg)
Viewport Tag
Not auto-injected.
<meta name="viewport" content="width=device-width, initial-scale=1">
![Page 90: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/90.jpg)
No JavaScript Scroll
Native overflow support
-webkit-overflow-scrolling: touch;
No JavaScript “fake scrolling”
Still problems with it
![Page 91: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/91.jpg)
CSS Transitions
• New transitions turn and flow as of 1.1
• Flip on Android is Stupid (does a cartwheel)
![Page 93: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/93.jpg)
jQuery Mobile Router
https://github.com/azicchetti/jquerymobile-router
var approuter = new $.mobile.Router([
{ "#certainPage": { handler: "foo", events: "s" } },
{ "#certainPage": { handler: "bar", events: "h" } }
], {
foo: function(...){...},
bar: function(...){...}
}, options);
![Page 94: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/94.jpg)
https://github.com/1Marc/jquery-mobile-routerlite
$.mobile.routerlite.routeinit("/admin", function(page, path){
doSomething();
});
$.mobile.routerlite.routechange("/admin", function(page, path){
doSomething();
});
jQuery Mobile Router Lite
![Page 95: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/95.jpg)
iOS Theme
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
![Page 96: Introduction to jQuery Mobile - Web Deliver for All](https://reader030.vdocument.in/reader030/viewer/2022032611/55a564dc1a28ab300c8b45e9/html5/thumbnails/96.jpg)
Thanks!