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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Mobile Hour 4

277

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×