04 jquery mobile
TRANSCRIPT
![Page 1: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/1.jpg)
jQuery MobileDesign “native” mobile apps
Wednesday, October 31, 12
![Page 2: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/2.jpg)
jQuery Mobile
A Mobile UI framework
Implements native looking UI components
Wednesday, October 31, 12
![Page 3: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/3.jpg)
Real World jQM
http://c.dric.be/ http://m.anticocasalediscansano.it/en/
Wednesday, October 31, 12
![Page 4: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/4.jpg)
Real World jQM
http://c.dric.be/ http://m.anticocasalediscansano.it/en/
Gallery:http://www.jqmgallery.com/
Wednesday, October 31, 12
![Page 5: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/5.jpg)
jQuery Mobile Dark Side
Needs jQuery
jQM way or the highway
Performance
Wednesday, October 31, 12
![Page 6: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/6.jpg)
jQM When
Use for Mobile Subdomain
Use for landing pages
Use for small static mobile web site
Wednesday, October 31, 12
![Page 7: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/7.jpg)
jQuery Mobile Bright Side
Page layout
UI Controls
jQM API
Theming
Wednesday, October 31, 12
![Page 8: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/8.jpg)
Page Layout
Wednesday, October 31, 12
![Page 9: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/9.jpg)
Using jQM<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Copied From http://jquerymobile.com/download/
Wednesday, October 31, 12
![Page 10: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/10.jpg)
Page Layout
a page is just a div with data-role=”page”
a jQM page has:
header
content
footer
Wednesday, October 31, 12
![Page 11: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/11.jpg)
Page Example
<div data-role="page"> <div data-role="header">...</div>
! <div data-role="content">...</div> ! <div data-role="footer">...</div> </div>
Wednesday, October 31, 12
![Page 12: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/12.jpg)
Hello jQMDemo
Wednesday, October 31, 12
![Page 13: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/13.jpg)
Multi Page Layout
Multiple pages can be specified in the same .html file
Each page is identified with an id attribute
Navigation is performed using a tags
Back button is generated for pages that have data-add-back-btn=”true”
Wednesday, October 31, 12
![Page 14: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/14.jpg)
Using transitions
Transitions are determined via the data-transition attribute
<p><a href="#about" data-transition="slideup">About this app</a></p>
Wednesday, October 31, 12
![Page 15: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/15.jpg)
Page TransitionsEffect Name Description
slide slide right-to-left. This is the default
slideup slide from bottom-to-top
slidedown slide from top-to-bottom
pop expand the new page (dialog pop-up style)
fade fade the new page in
flip flip pages (like cards).
Wednesday, October 31, 12
![Page 16: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/16.jpg)
Exercise
Write a mobile website with four pages.
First page: text and link.
Second page: back button and an image.
Third and fourth pages: simple texts
Create transition effects using: slide, pop, fade, flip
Wednesday, October 31, 12
![Page 17: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/17.jpg)
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Wednesday, October 31, 12
![Page 18: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/18.jpg)
jQM UI ControlsjQM provides ready-made UI controls for our app that “look” native.
This rich library includes:
Toolbars
Buttons
Forms & Lists
Wednesday, October 31, 12
![Page 19: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/19.jpg)
Toolbars
A header with data-position=”fixed”
Implements fixed position using JavaScript
Wednesday, October 31, 12
![Page 20: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/20.jpg)
Toolbars
We can add buttons to toolbars simply by writing them in the bar
header bar can have 2 buttons
Use inside header:<a href=”#” data-role=”button”>Add</a>
Wednesday, October 31, 12
![Page 21: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/21.jpg)
Toolbars
Careful not to put too many buttons - looks bad
Wednesday, October 31, 12
![Page 22: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/22.jpg)
Toolbars
Footer can have as many buttons as you wish
Add class=”ui-bar” to get padding
Demo
Wednesday, October 31, 12
![Page 23: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/23.jpg)
Toolbars
Again, don’t put too many buttons or it’ll look bad
Wednesday, October 31, 12
![Page 24: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/24.jpg)
Toolbar Exercise
Implement a mockup for a mail reader application
Top toolbar button: Logout
bottom toolbar buttons: Compose, delete, forward, reply.
Wednesday, October 31, 12
![Page 25: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/25.jpg)
Buttons
An anchor tag with data-role=”button” will look like a button
Any normal form button will automatically be converted
Wednesday, October 31, 12
![Page 26: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/26.jpg)
Button Icons
data-icon attribute allows using icons on a button
Wednesday, October 31, 12
![Page 27: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/27.jpg)
Button Iconsarrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
Wednesday, October 31, 12
![Page 28: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/28.jpg)
Icon Positions
data-iconpos determines the icon position
possible values: right, top, bottom, notext
Wednesday, October 31, 12
![Page 29: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/29.jpg)
Inline Buttons
Dialog buttons are usually placed side-by-side
This is called inline, and achieved viadata-inline=”true”
Wednesday, October 31, 12
![Page 30: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/30.jpg)
Buttons DemoWednesday, October 31, 12
![Page 31: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/31.jpg)
Button Exercise
Implement a jQM app with three buttons titled: red, blue and green
App background color should change when a user presses a button
Bonus: use gradients as background
Wednesday, October 31, 12
![Page 32: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/32.jpg)
Basic List<ul data-role="listview" data-theme="g">
! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li> </ul>
Wednesday, October 31, 12
![Page 33: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/33.jpg)
Numbered List
<ol data-role="listview" data-theme="g">! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li></ol>
Wednesday, October 31, 12
![Page 34: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/34.jpg)
Count Bubble List
Wrap the number in an element with ui-li-count to get the “count bubble”<li> <a href=”#”>Inbox <span class=”ui-li-count”>12</span> </a></li>
Wednesday, October 31, 12
![Page 35: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/35.jpg)
Thumbnail Lists
Insert an img tag as the first child in the anchor to get a thumbnail
Image is automatically scaled by jQM
Wednesday, October 31, 12
![Page 36: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/36.jpg)
Split List
Having two links in the same item creates a split list
Wednesday, October 31, 12
![Page 37: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/37.jpg)
Inset Lists
A list that is embedded in a page is called inset
use data-inset=”true” to get the effect
Wednesday, October 31, 12
![Page 38: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/38.jpg)
Exercise
Implement the following home screen
Wednesday, October 31, 12
![Page 39: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/39.jpg)
Navigation Bars
Navigation elements at the top or bottom of the page
Sometimes referred as “tab bars”
<div data-role="footer">! <div data-role="navbar">! ! <ul>! ! ! <li><a href="#" class="ui-btn-active">One</a></li>! ! ! <li><a href="#">Two</a> </li>! ! </ul>! </div><!-- /navbar --></div><!-- /footer -->
Wednesday, October 31, 12
![Page 40: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/40.jpg)
Top Nav Bar
Put the above code in the header to get top nav bars
They are recommended for mobile apps running inside the browser
Wednesday, October 31, 12
![Page 41: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/41.jpg)
Bottom Nav Bar
Put the above code in the footer to get bottom nav bar
Recommended in standalone apps
Wednesday, October 31, 12
![Page 42: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/42.jpg)
Tab Bars (ala iPhone)
Use data-icon to get icons in the nav bars above the text
Custom icons are also allowed
Free iOS Style Icons:http://glyphish.com/
Wednesday, October 31, 12
![Page 43: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/43.jpg)
Icon Gridsdivs can be lines up in columns (or grid)
<div class=”ui-grid-b”> <div class=”ui-block-a”> </div> <div class=”ui-block-b”> </div> <div class=”ui-block-c”> </div></div>
Wednesday, October 31, 12
![Page 44: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/44.jpg)
Exercise
Implement the following
App is 2 tabs: Home and Image Gallery
Home includes text info on eating vegetables
Gallery has photos of vegetables (use google images)Solution at: http://apps.ynonperek.com/mobileweb/jqm/vegapp/
Wednesday, October 31, 12
![Page 45: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/45.jpg)
FormsMobile optimized controls
Wednesday, October 31, 12
![Page 46: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/46.jpg)
Mobile Optimized Forms
jQuery mobile provides a complete set of finger friendly form elements
Most form elements are automatically initialized by jQM
Prevent auto initialization with data-role=”none”
Wednesday, October 31, 12
![Page 47: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/47.jpg)
jQuery vs. Normal
Wrap a labe/input pair in a divwith data-role=”fieldcontain”to get the cool thin line
Wednesday, October 31, 12
![Page 48: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/48.jpg)
Refresh
Form controls can be set programmatically
Must call “refresh” to refresh the ui
Use $(‘#fld-radio’).checkboxradio(“refresh”);
Wednesday, October 31, 12
![Page 49: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/49.jpg)
Form Elements
Text Inputs
Sliders
Buttons
Select Menu
Submitting Forms
Wednesday, October 31, 12
![Page 50: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/50.jpg)
Text InputsAvailable input types: text, password, number, email, url, tel, search
textarea provides multi-line text
triggers ‘create’ event on creation
Wednesday, October 31, 12
![Page 51: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/51.jpg)
Slider
input type=”range” creates a slider
attributes: value, min, max
refresh with .slider(‘refresh’);
Wednesday, October 31, 12
![Page 52: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/52.jpg)
Buttons - Flip Switch
<div data-role="fieldcontain">! <label for="slider">Select slider:</label>! <select name="slider" id="slider" data-role="slider">! ! <option value="off">Off</option>! ! <option value="on">On</option>! </select> </div>
Wednesday, October 31, 12
![Page 53: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/53.jpg)
Buttons - Radio<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> ! <legend>Choose a pet:</legend> ! <input type="radio" id="radio-choice-1" value="choice-1" name=”pet” checked="checked" /> ! <label for="radio-choice-1">Cat</label>
! <input type="radio" id="radio-choice-2" value="choice-2" name=”pet” /> ! <label for="radio-choice-2">Dog</label>
! <input type="radio" id="radio-choice-3" value="choice-3" name=”pet” /> ! <label for="radio-choice-3">Hamster</label>
! <input type="radio" id="radio-choice-4" value="choice-4" name=”pet” /> ! <label for="radio-choice-4">Lizard</label> </fieldset></div>
Wednesday, October 31, 12
![Page 54: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/54.jpg)
Buttons - Radio
Add data-type=”horizontal” to fieldset to get the horizontal radio buttons
Refresh with .checkboxradio(‘refresh’);
Wednesday, October 31, 12
![Page 55: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/55.jpg)
CheckBoxes
Wednesday, October 31, 12
![Page 56: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/56.jpg)
CheckBoxes
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you like</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Cheetos</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Doritos</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Fritos</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" /> <label for="checkbox-4">Sun Chips</label>
</fieldset></div>
Wednesday, October 31, 12
![Page 57: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/57.jpg)
CheckBoxes
Use data-role=”horizontal” for horizontal checkboxes
Remember the outer div with data-role=”fieldcontain” so jQM can outline the field
CheckBoxes & Radio Buttons both use a legend for the question text
Wednesday, October 31, 12
![Page 58: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/58.jpg)
Submitting Forms
AJAX is used to submit the forms
No Ajax forms are created with data-ajax=false
Wednesday, October 31, 12
![Page 59: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/59.jpg)
Q & A - Forms
Wednesday, October 31, 12
![Page 60: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/60.jpg)
Forms ExerciseImplement a 2 page registration from using jQM with the following fields:
Page 1 Page 2
username (text) gender (m/f)
password (pass) favorite colors (red, blue or green)can have more than one
phone number comments (text area)
Wednesday, October 31, 12
![Page 61: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/61.jpg)
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Wednesday, October 31, 12
![Page 62: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/62.jpg)
jQM API
Default configurations
jQM Events
Methods & Utilities
Wednesday, October 31, 12
![Page 63: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/63.jpg)
The mobileinit Event
bind to mobileinit event
Note: this event triggers immediately upon loading jqm
$(document).bind("mobileinit", function(){
//apply overrides here});
Wednesday, October 31, 12
![Page 64: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/64.jpg)
The mobileinit EventOverriding defaults is simply changing object attributes
Full list of configurable options at: http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.htmlglobalconfig.html
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = ‘slide’;});
Wednesday, October 31, 12
![Page 65: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/65.jpg)
jQM Eventstap
taphold
swipe
swipeleft
swiperight
orientationchange
scrollstart
scrollstop
pageshow
pagehide
pagecreate
pageinit
Wednesday, October 31, 12
![Page 66: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/66.jpg)
jQM Methods
$.mobile.changePage(to, options)
$.mobile.silentScroll
Full list at: http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.html#/demos/1.0b2/docs/api/methods.html
Wednesday, October 31, 12
![Page 67: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/67.jpg)
Exercise (1)
Implement a jQM app that has two pages
First page keeps a combo box with values: slide, flip; and a “go” button
When a user clicks “go”, app moves to the second page in the selected transition style
Wednesday, October 31, 12
![Page 68: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/68.jpg)
Exercise (2)
Modify previously implemented “switching cards” to use swipe gestures
Wednesday, October 31, 12
![Page 69: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/69.jpg)
jQuery Mobile
Page layout
UI Controls
jQM API
Theming
Wednesday, October 31, 12
![Page 70: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/70.jpg)
jQM Themes
The theme controls how elements look on the page
Each theme has swatches for color play
Default theme has 5 swatches marked a,b,c,d,e
Wednesday, October 31, 12
![Page 71: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/71.jpg)
Default Theme
Wednesday, October 31, 12
![Page 72: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/72.jpg)
jQM Customize Theme
To customize a theme:
Edit jQM css
Copy a swatch definitions as a new swatch
Change the swatch letter
Make your changes
Wednesday, October 31, 12
![Page 73: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/73.jpg)
Q & A
Wednesday, October 31, 12
![Page 74: 04 jQuery Mobile](https://reader038.vdocuments.us/reader038/viewer/2022103114/5552795bb4c905b4598b497b/html5/thumbnails/74.jpg)
Thank You
Ynon Perek
ynonperek.com
Wednesday, October 31, 12