Your SlideShare is downloading. ×
  • Like
jQuery Mobile Hour 4
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Mobile Hour 4



  • 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
  • 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
  • 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
  • 4. Adding jQuery Mobile to Your SiteGo to to find these files.Explore● Docs● Download● Platforms● Themes● Resources● Forum● Blog
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 11. Creating a Simple PageExample #2: button_click.htmldata-rel="back"● allows jQuery Mobile to enable the back button● NOTE: href="#"
  • 12. Understanding the Mobile InitiationEventTo be discussed at a later time.