![Page 1: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/1.jpg)
1
Lab 2: jQuery Mobile
Mikael Blomberg
![Page 2: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/2.jpg)
2
Lab structure
• jQuery introduction
• jQuery Mobile
• Pages
• List Views
• Buttons
• Toolbars
• Form Elements
• Content Formatting
Mikael Blomberg
![Page 3: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/3.jpg)
3
jQuery introduction
• jQuery is a cross-browser JavaScript Library
• Simplifies DOM traversing and modification
• Event handling
• Animation
• Ajax interaction
• Extendable with plugins
Mikael Blomberg
![Page 4: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/4.jpg)
4
jQuery examples
Mikael Blomberg
![Page 5: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/5.jpg)
5
jQuery Mobile
• touch-optimized
• progressive enhancement
• themeable design
• cross-platform & cross-browser
• supports all major platforms
• supports all major browsers
• hybrid app friendly
Mikael Blomberg
![Page 6: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/6.jpg)
6
jQuery Mobile examples
Mikael Blomberg
![Page 7: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/7.jpg)
7
jQuery Mobile : Pages html page
Mikael Blomberg
![Page 8: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/8.jpg)
8
jQuery Mobile : Pages goal
Mikael Blomberg
![Page 9: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/9.jpg)
9
jQuery Mobile : Pages
• A view is called “Page”
• jQuery Mobile uses data attributes
• Each page can have 3 data-roles
• Header
• Content
• Footer
• A multi-page app is linked using #pageId
Mikael Blomberg
![Page 10: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/10.jpg)
10
jQuery Mobile : Pages continued
• Automatic page transitions
• data-transition=”fade” by default
• fade, pop, flip, turn, flow, slide, etc.
• Linked pages are automatically hijaxed
• data-rel=”external” or data-ajax=”false”
• Back-button support
• data-rel=”back” or data-add-back-btn=”true”
• A page can be presented as a Dialog
• data-rel=”dialog”Mikael Blomberg
![Page 11: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/11.jpg)
11
jQuery Mobile : Pages demo
Mikael Blomberg
![Page 12: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/12.jpg)
12
jQuery Mobile : List Views goal
Mikael Blomberg
![Page 13: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/13.jpg)
13
jQuery Mobile : List Views
• There are 3 types of List Views
• Unordered, ordered and nested lists
• List items with anchors are automatically enhanced
• A single anchor becomes a right arrow icon
• Two anchors becomes a split button
• Nested lists are lists inside list item
• <ul><li>Labs<ul><li>Lab 1...
Mikael Blomberg
![Page 14: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/14.jpg)
14
jQuery Mobile : List Views continued
• List items can be separated using a divider
• data-role=”divider”
• Search filters can be added using
• data-filter=“true”
• List views can be added to forms using
• data-inset=”true”
• Count bubbles can be added using
• class=”ul-li-count”
Mikael Blomberg
![Page 15: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/15.jpg)
15
jQuery Mobile : List Views demo
Mikael Blomberg
![Page 16: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/16.jpg)
16
jQuery Mobile : Buttons goal
Mikael Blomberg
![Page 17: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/17.jpg)
17
jQuery Mobile : Buttons
• jQuery Mobile enhanced buttons to be touch-friendly
• Typically there are two types of buttons
• link buttons for navigation
• form-based buttons for form submissions
• Automatic input and button enhancement
• Any element can be used as a button using
• data-role=”button”
• Buttons can be inline using
• data-inline=”true”Mikael Blomberg
![Page 18: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/18.jpg)
18
jQuery Mobile : Buttons continued
• Button icons can be set using
• data-icon=”star” (available icons)
• Buttons can be grouped and aligned using
• data-role=”controlgroup”
• data-type=”horizontal” (vertical by default)
• Buttons can be themed using
• data-theme=”a”
• other alternatives are b,c,d, and e
Mikael Blomberg
![Page 19: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/19.jpg)
19
jQuery Mobile : Buttons demo
Mikael Blomberg
![Page 20: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/20.jpg)
20
jQuery Mobile : Toolbars goal
Mikael Blomberg
![Page 21: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/21.jpg)
21
jQuery Mobile : Toolbars
• There are three types of toolbars
• Header, footer, and navbar
• Automatically positions the header to the top of the page and footer to the bottom of the page
• Header and footer toolbars can be fixed using
• data-position=”fixed”
• Persisting toolbar in transitions by using
• data-id=”exampleId” (same id in all)
• class=”ui-btn-active ui-state-persist”Mikael Blomberg
![Page 22: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/22.jpg)
22
jQuery Mobile : Toolbars continued
• Navbars are unordered anchor lists inside containers
• data-role=”navbar”
• class=”ui-btn-active”
• Navbar button widths are automatically adjusted
• up to 5 buttons are on a single row
• 6+ buttons are on multiple rows (two per row)
• Button icons are positioned above the text
• data-iconpos=”top” by default
• alternatives are “bottom”, “left”, and “right”Mikael Blomberg
![Page 23: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/23.jpg)
23
jQuery Mobile : Toolbars demo
Mikael Blomberg
![Page 24: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/24.jpg)
24
jQuery Mobile : Form Elements goal
Mikael Blomberg
![Page 25: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/25.jpg)
25
jQuery Mobile : Form Elements
• Automatically enhances native form elements to rich touch-friendly component
• Prevent progressive enhancement by using
• data-role=”none”
• Enforced accessibility by requiring labels
• Labels can be hidden using
• class=”ui-hidden-accessible” or “ui-hide-label”
Mikael Blomberg
![Page 26: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/26.jpg)
26
jQuery Mobile : Form Elements continued
• Compact forms are rendered using
• data-mini=”true”
• Labels and components inline by using
• data-role=”fieldcontain”
• Automatically increases textarea height
• Form elements can be grouped and aligned using
• data-role=”controlgroup”
• data-type=”horizontal” (vertical by default)
Mikael Blomberg
![Page 27: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/27.jpg)
27
jQuery Mobile : Form Elements demo
Mikael Blomberg
![Page 28: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/28.jpg)
28
jQuery Mobile : Content Formatting goal
Mikael Blomberg
![Page 29: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/29.jpg)
29
jQuery Mobile : Content Formatting
• There are four preset grid layouts
• class=”ui-grid-a" for a two-column layout ...
• class=”ui-grid-d” for a five-column layout
• Content blocks with class=”ui-block-a” (a/b/c/d/e)
• class=”ui-block-a” creates a new row
• Collapsible content by using
• data-role=”collapsible”
• data-collapsed=”true” by default
• data-iconpos=”left” by defaultMikael Blomberg
![Page 30: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/30.jpg)
30
jQuery Mobile : Content Formatting continued
• Nested collapsible content
• <div data-role=”collapsible”><h3>Collapsible</h3><div data-role=”collapsible”>
<h3>Nested</h3>...
• Collapsible sets (Accordion)
• data-role=”collapsible-set”
• <div data-role=”collapsible-set”><div data-role=”collapsible”><h3>Title</h3>...
Mikael Blomberg
![Page 31: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/31.jpg)
31
jQuery Mobile : Content Formatting demo
Mikael Blomberg
![Page 32: Lab 2: jQuery Mobile - aaltowebapps.comaaltowebapps.com/docs/2012_1/jQuery Mobile - Mikael Blomberg.pdf · jQuery Mobile : Toolbars • There are three types of toolbars • Header,](https://reader033.vdocuments.net/reader033/viewer/2022060300/5f081d027e708231d4206745/html5/thumbnails/32.jpg)
Thank you for attending!Mikael Blomberg
Senior Developer
SC5 Online Oy