jquery mobile - environments for humansenvironmentsforhumans.com/...design...jquerymobile.pdfjquery...
Post on 12-Jun-2020
7 Views
Preview:
TRANSCRIPT
Web Delivery for ALL!
jQuery Mobile
Monday, August 27, 12
Marc Grabanski
jQuery UI Datepicker
MarcGrabanski.com
LOTS of UI Dev
Who?
Monday, August 27, 12
Current
Talent Evangelist& UI/UX Developer
MJG Internationalwww.mjg.in
Who?
Monday, August 27, 12
www.MJG.in/FrontendMasters
Frontend Masters
5 Intense Video Workshops.4 Incredible Teachers.
Monday, August 27, 12
The web is for everyone and all can view it
The Great Promise of the Web
Monday, August 27, 12
Monday, August 27, 12
Not “Mobile Only”Mobile First
Monday, August 27, 12
Desktop too!
Monday, August 27, 12
Source Your Sources
Monday, August 27, 12
I visited
and talked to
about
Monday, August 27, 12
Why jQuery Mobile?
Monday, August 27, 12
4 Main Reasons to Use jQuery Mobile
Monday, August 27, 12
#1. Ajaxified Navigation
Friendly Ajax URLs
Faster subsequent page loads
Monday, August 27, 12
#2. Layout and Theming Engine
Quickly style and extend styles
Monday, August 27, 12
#3Touch Friendly Inputs
(and widgets)Improved UX for form inputs
Monday, August 27, 12
#4Widest Browser Coverage
Web living up to it’s promise
Monday, August 27, 12
Devices TestedjQuery Mobile Testing Lab
Monday, August 27, 12
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
Monday, August 27, 12
ProgressiveEnhancement
C-Grade: Basic HTML
B-Grade: Enhanced Style, No Ajax
A-Grade: Full Enhanced Style,
Ajax and CSS Transitions
+++
Monday, August 27, 12
You’ll always see...something
Monday, August 27, 12
it’s alive!
Monday, August 27, 12
and growing...
http://www.google.com/trends/?q=jquery+mobile
Monday, August 27, 12
Two popular mobile frameworks
Sencha “app first”
jQuery Mobile
“web first”
http://www.google.com/trends/?q=jquery+mobile,+sencha,+dojo+mobile,+jqmobi
Monday, August 27, 12
jQuery Mobile+ Adobe
Embedded into Creative SuiteSponsors jQuery Mobile Dev
Monday, August 27, 12
http://jquerymobile.com/test
Dev Snapshot
Monday, August 27, 12
One More *Magical* File
Monday, August 27, 12
Get the (Coding)Party
Including Latest:
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
Monday, August 27, 12
#1 - AjaxifiedNavigation
Monday, August 27, 12
No page refresh?!How does that work?
Monday, August 27, 12
Looks forhref and actionin your HTML
Monday, August 27, 12
Auto-AjaxLinks
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)
Monday, August 27, 12
/index.html
*click*
Monday, August 27, 12
/index.html /page.html
*load*
Monday, August 27, 12
/index.html /page.html
*slide*
Monday, August 27, 12
/index.html /page.html
*done*
Monday, August 27, 12
Page Transitions
• <a data-transition=pop>...</a>(slide, slideup, slidedown, pop, fade, flip)
• <a data-transition=pop data-direction=reverse>...</a>
http://jquerymobile.com/test/docs/pages/page-transitions.html
Monday, August 27, 12
Default transition is now fade
(more webby)
Monday, August 27, 12
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.1.1/docs/pages/multipage-template.html
Monday, August 27, 12
No more#/crap/urls.html
Pushstate on Relative URLs
/index.html
to /index.html#/foo.html
to /foo.html
Monday, August 27, 12
1. Form action=”page.html” POST Ajax
2. Slides in New Content
3. Updates URL(same as links)
Auto-AjaxForms
Monday, August 27, 12
I don’t use auto-ajax forms. Disable with
data-ajax=false
Monday, August 27, 12
#2 - Layout and Theming
Monday, August 27, 12
Looking fordata-* attributes
Monday, August 27, 12
Play a Role
data-role=*
page, header, content, footer, listview, list-divider, button, controlgroup
Monday, August 27, 12
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.1.1/docs/pages/page-anatomy.html
Monday, August 27, 12
Markup
Magical
Zones
<div data-role=header>...</div>
<div data-role=content>...</div>
<div data-role=footer>...</div>
Monday, August 27, 12
Docs Structure
<div data-role=content>
<div data-role=footer>
<div data-role=page>
Monday, August 27, 12
Listview
Monday, August 27, 12
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>
Monday, August 27, 12
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.1.1/docs/api/themes.html
Monday, August 27, 12
List Theming
<ul data-theme=[a-f]>
http://jquerymobile.com/demos/1.1.1/docs/api/themes.html
Monday, August 27, 12
List Theming
<ul data-theme=b> <li>...</li> <li>...</li> </ul>
Monday, August 27, 12
Content Themingui-[body|bar]-[a-f]
class=”ui-body ui-body-b”
class=”ui-bar ui-bar-c”
Monday, August 27, 12
e.g. Docs Theming
<ul data-inset=true data-dividertheme=b ...>
<ul data-inset=true data-dividertheme=f ...>
Monday, August 27, 12
Responsive Docs Example
class=content-primary
class=content-secondary
MobileTablet and Desktop
Monday, August 27, 12
jQuery Mobile ThemeRoller
http://jquerymobile.com/themeroller/index.phpMonday, August 27, 12
ReusableWidgets
Monday, August 27, 12
Buttons
Link as a button
<a data-role=button ...>slidedown</a>
http://jquerymobile.com/test/docs/buttons/buttons-types.html
Monday, August 27, 12
data-* Button Theming
<button data-icon=*>arrow-r, delete, plus, minus, gear, grid, refresh, etc.
http://jquerymobile.com/test/docs/buttons/buttons-icons.html
Monday, August 27, 12
data-* Button Theming
<button data-inline=true>
<button data-icon=delete data-iconpos=right>
http://jquerymobile.com/test/docs/buttons/buttons-icons.html
Monday, August 27, 12
Dialog
<a data-rel=dialog>
http://jquerymobile.com/test/docs/pages/page-dialogs.htmlMonday, August 27, 12
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/test/docs/buttons/buttons-grouped.html
Monday, August 27, 12
Navbardata-role=navbar
http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html
Monday, August 27, 12
Navbar w/Icons
http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html
Monday, August 27, 12
Filter Bar
<ul data-filter=true>
http://jquerymobile.com/demos/1.1.1/docs/lists/lists-search.html
Monday, August 27, 12
http://jquerymobile.com/test/docs/pages/popup/index.html
Popup Widget (in 1.2)
Monday, August 27, 12
#3Touch-friendlyForm Inputs
Monday, August 27, 12
Enhance Form Elements
Default MOBILIZED!
Monday, August 27, 12
Monday, August 27, 12
Slider
<input type=range value=50 min=0 max=100>
http://jquerymobile.com/demos/1.1.1/docs/forms/slider/
Monday, August 27, 12
Search Input
<input type=search>
http://jquerymobile.com/demos/1.1.1/docs/forms/search/
Monday, August 27, 12
Checkbox Set
http://jquerymobile.com/demos/1.1.1/docs/forms/checkboxes/
Monday, August 27, 12
Radio Button Set
http://jquerymobile.com/demos/1.1.1/docs/forms/radiobuttons/
Monday, August 27, 12
Flip Switch<select data-roll=slider>
<option>Switch Off</option>
<option>Switch On</option>
</select>
http://jquerymobile.com/demos/1.1.1/docs/forms/switch/
Monday, August 27, 12
data-native-menu=true
Monday, August 27, 12
data-native-menu=false
http://jquerymobile.com/demos/1.1.1/docs/forms/selects/custom.html
Monday, August 27, 12
Auto Grow Textareas
http://jquerymobile.com/demos/1.1.1/docs/forms/textinputs/index.html
Monday, August 27, 12
HTML5 Input Types(not just jQuery Mobile)
Monday, August 27, 12
<input type=password>
Monday, August 27, 12
<input type=number>
Monday, August 27, 12
<input type=email>
Monday, August 27, 12
<input type=url>
Monday, August 27, 12
<input type=tel>
Monday, August 27, 12
Misc Notes
Monday, August 27, 12
Widgets• page sections
• checkboxradio
• select
• slider
• textinput
• links
• collapsible
• popup
• controlgroup
• fieldcontain
• fixheaderfooter
• button
• listview
• navbar
• grid
• dialog
Monday, August 27, 12
Download Builder
http://jquerymobile.com/download-builder/
Monday, August 27, 12
SnippetsConfigure jQM
$(document).on("mobileinit", function(){
$.extend($.mobile , { foo: bar });
});
New DOM Ready
$(document).on(“pagecreate”, function(e) {
// do somefin’ will ya?
});
Monday, August 27, 12
Modifying DOM$page .append(“<a data-role=button>Button</a>”) .trigger(‘create’)
Initializes UI components
Monday, August 27, 12
Viewport Tag
Not auto-injected.
<meta name="viewport" content="width=device-width, initial-scale=1">
Monday, August 27, 12
No JavaScript Scroll
Native overflow support
-webkit-overflow-scrolling: touch;
No JavaScript “fake scrolling”
Still problems with it
Monday, August 27, 12
CSS Transitions
• New transitions turn and flow as of 1.1
• Flip on Android is Stupid(does a cartwheel)
Monday, August 27, 12
Plugins and Resources
http://jquerymobile.com/resources/Monday, August 27, 12
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);
Monday, August 27, 12
iOS Theme
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
Monday, August 27, 12
Build Latest
1. $ git clone
git://github.com/jquery/jquery-mobile.git
2. $ npm install
3. $ node node_modules/.bin/grunt js$ node node_modules/.bin/grunt css
Monday, August 27, 12
top related