jQuery Mobile
Hour 4
Intro to the jQuery Mobile Framework
about.me/babon
What You'll Learn in Hour 4
+ What files make up the jQuery Mobile
framework
+ How jQuery Mobile works with data attribute...
Adding jQuery Mobile to Your Site
These files make up the complete jQuery
Mobile framework:
● jQuery library JavaScript fi...
Adding jQuery Mobile to Your Site
Go to jQuery.com to find these files.
Explore jQueryMobile.com:
● Demos
● Download
● API...
Adding jQuery Mobile to Your Site
Basic page layout:
Example: basic_layout.html
content="width=device-width, initial-scale...
Using Data Roles
Data attributes are part of the HTML5 spec.
jQuery Mobile uses these data attributes to
create data roles...
Creating a Simple Page
Example #1: expanded_layout.html
data-role="page"
● allows jQuery Mobile to treat this div as a
sin...
Creating a Simple Page
Example #1: expanded_layout.html
data-role="header" and data-role="content"
data-role="button"
● al...
Creating a Simple Page
Example #2: button_click.html
data-rel="dialog"
● allows jQuery Mobile to display a linked
element ...
Creating a Simple Page
Example #2: button_click.html
data-theme="d"
● allows jQuery Mobile to style the dialog
window a li...
Creating a Simple Page
Example #2: button_click.html
data-rel="back"
● allows jQuery Mobile to enable the back
button
● NO...
Understanding the Mobile Initiation
Event
To be discussed at a later time.
about.me/babon
Upcoming SlideShare
Loading in …5
×

jQuery Mobile Hour 4

417 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
417
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Mobile Hour 4

  1. 1. jQuery Mobile Hour 4 Intro to the jQuery Mobile Framework about.me/babon
  2. 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. 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. 4. Adding jQuery Mobile to Your Site Go to jQuery.com to find these files. Explore jQueryMobile.com: ● Demos ● Download ● API Documentation ● Themes ● Resources ● Blog ● About about.me/babon
  5. 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. 6. Using Data Roles Data attributes are part of the HTML5 spec. 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. 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. 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. 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. 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. 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
  12. 12. Understanding the Mobile Initiation Event To be discussed at a later time. about.me/babon

×