jQuery Mobile Hour 4
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


jQuery Mobile Hour 4






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

jQuery Mobile Hour 4 Presentation Transcript

  • 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