• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. jQuery Mobile Hour 4Intro to the jQuery Mobile Framework about.me/babon
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Creating a Simple PageExample #2: button_click.htmldata-rel="back"● allows jQuery Mobile to enable the back button● NOTE: href="#" about.me/babon
  • 12. Understanding the Mobile InitiationEventTo be discussed at a later time. about.me/babon