0
jQuery Mobile                Hour 4Intro to the jQuery Mobile Framework                           about.me/babon
What Youll Learn in Hour 4+ What files make up the jQuery Mobileframework+ How jQuery Mobile works with data attributes+ H...
Adding jQuery Mobile to Your SiteThese files make up the complete jQueryMobile framework:● jQuery library JavaScript file●...
Adding jQuery Mobile to Your SiteGo to jQuery.com to find these files.Explore jQueryMobile.com:● Docs● Download● Platforms...
Adding jQuery Mobile to Your SiteBasic page layout:Example: basic_layout.htmlcontent="width=device-width, initial-scale=1"...
Using Data RolesData attributes are part of the HTML5specification.jQuery Mobile uses these data attributes tocreate data ...
Creating a Simple PageExample #1: expanded_layout.htmldata-role="page"● allows jQuery Mobile to treat this div as a  singl...
Creating a Simple PageExample #1: expanded_layout.htmldata-role="header" and data-role="content"data-role="button"● allows...
Creating a Simple PageExample #2: button_click.htmldata-rel="dialog"● allows jQuery Mobile to display a linked  element as...
Creating a Simple PageExample #2: button_click.htmldata-theme="d"● allows jQuery Mobile to style the dialog  window a litt...
Creating a Simple PageExample #2: button_click.htmldata-rel="back"● allows jQuery Mobile to enable the back  button● NOTE:...
Understanding the Mobile InitiationEventTo be discussed at a later time.                                   about.me/babon
Upcoming SlideShare
Loading in...5
×

jQuery Mobile Hour 4

295

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
295
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Mobile Hour 4"

  1. 1. jQuery Mobile Hour 4Intro to the jQuery Mobile Framework about.me/babon
  2. 2. What Youll Learn in Hour 4+ What files make up the jQuery Mobileframework+ How jQuery Mobile works with data attributes+ How to use jQuery Mobile to create a simplepage+ How to use the mobile initiation event about.me/babon
  3. 3. Adding jQuery Mobile to Your SiteThese files make up the complete jQueryMobile framework:● jQuery library JavaScript file● jQuery Mobile library JavaScript file● jQuery Mobile CSS stylesheet about.me/babon
  4. 4. Adding jQuery Mobile to Your SiteGo to jQuery.com to find these files.Explore jQueryMobile.com:● Docs● Download● Platforms● Themes● Resources● Forum● Blog about.me/babon
  5. 5. Adding jQuery Mobile to Your SiteBasic page layout:Example: basic_layout.htmlcontent="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 RolesData attributes are part of the HTML5specification.jQuery Mobile uses these data attributes tocreate data roles for data storage.To create a data attribute you must start theattribute with "data-" followed by lowercaseletters. Examples: data-phone, data-userid about.me/babon
  7. 7. Creating a Simple PageExample #1: expanded_layout.htmldata-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 PageExample #1: expanded_layout.htmldata-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 PageExample #2: button_click.htmldata-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 PageExample #2: button_click.htmldata-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 PageExample #2: button_click.htmldata-rel="back"● allows jQuery Mobile to enable the back button● NOTE: href="#" about.me/babon
  12. 12. Understanding the Mobile InitiationEventTo be discussed at a later time. about.me/babon
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×