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

jQuery Mobile Hour 4

on

  • 455 views

 

Statistics

Views

Total Views
455
Slideshare-icon Views on SlideShare
455
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

    jQuery Mobile Hour 4 jQuery Mobile Hour 4 Presentation Transcript

    • 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+ How to use jQuery Mobile to create a simplepage+ How to use the mobile initiation event about.me/babon
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Creating a Simple PageExample #2: button_click.htmldata-rel="back"● allows jQuery Mobile to enable the back button● NOTE: href="#" about.me/babon
    • Understanding the Mobile InitiationEventTo be discussed at a later time. about.me/babon