1. jQuery Mobile
Hour 4
Intro to the jQuery Mobile Framework
about.me/babon
2. What You'll Learn in Hour 4
+ What files make up the jQuery Mobile
framework
+ How jQuery Mobile works with data attributes
+ How to use jQuery Mobile to create a simple
page
+ How to use the mobile initiation event
about.me/babon
3. Adding jQuery Mobile to Your Site
These files make up the complete jQuery
Mobile framework:
● jQuery library JavaScript file
● jQuery Mobile library JavaScript file
● jQuery Mobile CSS stylesheet
about.me/babon
4. Adding jQuery Mobile to Your Site
Go to jQuery.com to find these files.
Explore jQueryMobile.com:
● Docs
● Download
● Platforms
● Themes
● Resources
● Forum
● Blog about.me/babon
5. Adding jQuery Mobile to Your Site
Basic page layout:
Example: basic_layout.html
content="width=device-width, initial-scale=1"
● when page is viewed it should not be
zoomed in or zoomed out
about.me/babon
6. Using Data Roles
Data attributes are part of the HTML5
specification.
jQuery Mobile uses these data attributes to
create data roles for data storage.
To create a data attribute you must start the
attribute with "data-" followed by lowercase
letters. Examples: data-phone, data-userid
about.me/babon
7. Creating a Simple Page
Example #1: expanded_layout.html
data-role="page"
● allows jQuery Mobile to treat this div as a
single page
● allow you to have a multipage site contained
in one HTML file
about.me/babon
8. Creating a Simple Page
Example #1: expanded_layout.html
data-role="header" and data-role="content"
data-role="button"
● allows jQuery Mobile to transform a standard
link into a fully styled button
about.me/babon
9. Creating a Simple Page
Example #2: button_click.html
data-rel="dialog"
● allows jQuery Mobile to display a linked
element as a dialog instead of a standard
page
about.me/babon
10. Creating a Simple Page
Example #2: button_click.html
data-theme="d"
● allows jQuery Mobile to style the dialog
window a little differently than the current
color scheme
● currently five themes: a, b, c, d, e
about.me/babon
11. Creating a Simple Page
Example #2: button_click.html
data-rel="back"
● allows jQuery Mobile to enable the back
button
● NOTE: href="#"
about.me/babon
