SlideShare a Scribd company logo
1 of 33
Download to read offline
for fun and profit


jQuery Mobile © 2010 The jQuery Project                       http://jquerymobile.com/
Daniel Cousineau
Interactive Software Engineer @ RAPP
http://dcousineau.com/
@dcousineau
dcousineau@gmail.com
What Is jQuery Mobile?
Multi
     Platform
Images from jquerymobile.com
Touch-optimized & Themable
Images from jquerymobile.com
Mobile Web Framework

Unified User Interface
My Term: Half Stack
Widget Library
Touch Events
Project Status


 As of October 19th, 2011: RC2
 This talk centers around RC1
More Details
Built on jQuery
Lightweight (12k compressed)
Progressive Enhancement
HTML5
Accessibility baked-in (WAI-ARIA)
Modular & Theme-able
jQuery Mobile Primer
Provided
Interface elements
Simple device orientation detection
Tap & mobile events


DOES NOT PROVIDE Geo Location, Canvas, Local
Storage, etc.
  Remember: A ‘HALF’ STACK
<!DOCTYPE html>                                                                    <!DOCTYPE html>
<html>
                                                                                   <html>
    <head>
        <title>Page Title</title>                                                      <head>
        <link rel="stylesheet" href="/path/to/jquery.mobile.css" />                          <title>Hello World</title>
        <script type="text/javascript" src="/path/to/jquery.js"></script>
                                                                                             <script src="path/to/sencha-touch.js" type="text/javascript"></script>
        <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
    </head>                                                                                  <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
    <body>                                                                                   <script type="text/javascript">
              <div data-role="page">
                                                                                                     new Ext.Application({
                  <div data-role="content">	                                                             launch: function() {
                      <p>Hello World.</p>	 	
                                                                                                             new Ext.Panel({
                  </div>                                                                                         fullscreen: true,
              </div>
                                                                                                                 html: 'Hello World!'
    </body>
</html>                                                                                                      });
                                                                                                         }
                                                                                                     });
                                                                                             </script>
                                                                                       </head>

                                                                                       <body></body>
                                                                                   </html>




                                                                                                         Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
<!DOCTYPE html>                                                                    <!DOCTYPE html>
<html>
                                                                                   <html>
    <head>
        <title>Page Title</title>                                                      <head>
        <link rel="stylesheet" href="/path/to/jquery.mobile.css" />                          <title>Hello World</title>
        <script type="text/javascript" src="/path/to/jquery.js"></script>
                                                                                             <script src="path/to/sencha-touch.js" type="text/javascript"></script>
        <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
    </head>                                                                                  <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
    <body>                                                                                   <script type="text/javascript">
              <div data-role="page">
                                                                                                     new Ext.Application({
                  <div data-role="content">	                                                             launch: function() {
                      <p>Hello World.</p>	 	
                                                                                                             new Ext.Panel({
                  </div>                                                                                         fullscreen: true,
              </div>
                                                                                                                 html: 'Hello World!'
    </body>
</html>                                                                                                      });
                                                                                                         }
                                                                                                     });
                                                                                             </script>
                 Semantic &                                                            </head>

                                                                                       <body></body>
                 Progressive Refinement                                            </html>




                                                                                                         Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
In The Beginning

<!DOCTYPE html>
<html>
<head>
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <title>Page Title</title>
	   <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	   <script type="text/javascript" src="/path/to/jquery.js"></script>
	   <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>

</body>
</html>
Configuration


Configuration ONLY in mobileinit listener

All mobileinit listeners defined BEFORE loading
jQuery Mobile
In The Beginning
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {
	            configurationKey: configurationValue
	        });
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>

</body>
</html>
Think In Pages

<div data-role=”page” />
Only 1 visible at any time
Multiple allowed per document
  You can write a single-file application
Contains header, footer, and content area
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {} );
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
	   <div data-role="header">
	   	    <h1>Page Title</h1>
	   </div>

	    <div data-role="content">	
	    	   <p>Page content goes here.</p>	              	
	    </div>

	   <div data-role="footer">
	   	   <h4>Page Footer</h4>
	   </div>
</div>
</body>
</html>
Progressive Enhancement

Uses the HTML5 data-* attributes to auto-enhance
and configure widgets
data-role is now the center of your world.

E.g. To create a button, add a <a href=”#” data-
role=”button”>LABEL</a> and jQuery Mobile will
automagically set it up during page creation.
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {} );
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
	    <div data-role="header">
	    	     <h1>Page Title</h1>
	    </div>


	    <div data-role="content">	
	    	   <a href="#">Normal Link</a>
	    	   <a href="#" data-role="button">Button</a>	 	
	    </div>

	    <div data-role="footer">
	    	    <h4>Page Footer</h4>
	    </div>
</div>
</body>
</html>
jQuery Mobile.com Docs


  http://jquerymobile.com/demos/1.0rc1
Load jQueryMobile JS      mobileinit

       domready

                       pagebeforechange

     pagebeforecreate        Enhance Page    pagecreate




          pagehide                          pagebeforeshow




      pagebeforehide         Navigate         pageshow



                          pagechange
Touch Events
 tap

 taphold

 swipe

 swipeleft

 swiperight

 orientationchange

 scrollstart

 scrollstop
Normalized “Virtual” Events
 vmouseover

 vmousedown

 vmousemove

 vmouseup

 vclick

 vmousecancel
Auto-‘AJAX’
By default, all local links get a click listener
Can be disabled
Overrides default action:
  Fires XMLHTTP request for target
  Pulls <div data-role=”page”></div> from
  results, inserts into DOM
  Transitions to displaying the new target page
Auto-‘AJAX’


By default, all local forms get a submission handler
Same process as links, only overriding for form submit
Auto-‘AJAX’

CAUTION: There is no baked-in way to pass
parameters to AJAX’ed pages
Sever side via GET requests to back-end
Use #page?key=value, manually parse window.location
Disable / override hash listener
Learn By Doing
Code Time...


https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit

            http://jquerymobile.com/demos/1.0rc1
Wrap Up
http://jqmgallery.com/
Resources


@jquerymobile
http://jquerymobile.com/blog/
http://jquerymobile.com/demos/1.0rc1
Advanced Learning


Panel / iPad Ready Layouts
 http://asyraf9.github.com/jquery-mobile/
http://joind.in/3762

More Related Content

What's hot

Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web Framework
IndicThreads
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
Jonathan Wage
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODM
Jonathan Wage
 

What's hot (17)

Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side Transformations
 
前端概述
前端概述前端概述
前端概述
 
Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the Trenches
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 
J query training
J query trainingJ query training
J query training
 
jQuery
jQueryjQuery
jQuery
 
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperDoctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
 
Overview Of Lift Framework
Overview Of Lift FrameworkOverview Of Lift Framework
Overview Of Lift Framework
 
Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web Framework
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Alfredo-PUMEX
Alfredo-PUMEXAlfredo-PUMEX
Alfredo-PUMEX
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODM
 
RicoLiveGrid
RicoLiveGridRicoLiveGrid
RicoLiveGrid
 

Similar to jQuery Mobile: For Fun and Profit

C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
NAVER D2
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
goldenveizer
 

Similar to jQuery Mobile: For Fun and Profit (20)

HelloWorld
HelloWorldHelloWorld
HelloWorld
 
Hello world
Hello worldHello world
Hello world
 
React
React React
React
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
 
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 MinutesBuild Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Java script page redirection
Java script   page redirectionJava script   page redirection
Java script page redirection
 
Hybrid app
Hybrid appHybrid app
Hybrid app
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
Let's react - Meetup
Let's react - MeetupLet's react - Meetup
Let's react - Meetup
 
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JSJavascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
 
Getting Started with React v16
Getting Started with React v16Getting Started with React v16
Getting Started with React v16
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
 
JavaServer Pages
JavaServer PagesJavaServer Pages
JavaServer Pages
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages
 
servlet programming
servlet programmingservlet programming
servlet programming
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Grooscript and Grails 3
Grooscript and Grails 3Grooscript and Grails 3
Grooscript and Grails 3
 

More from Daniel Cousineau

More from Daniel Cousineau (6)

Git, an Illustrated Primer
Git, an Illustrated PrimerGit, an Illustrated Primer
Git, an Illustrated Primer
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
 
Disregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_FormDisregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_Form
 
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
 
Automated Deployment With Phing
Automated Deployment With PhingAutomated Deployment With Phing
Automated Deployment With Phing
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 

jQuery Mobile: For Fun and Profit

  • 1. for fun and profit jQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
  • 2. Daniel Cousineau Interactive Software Engineer @ RAPP http://dcousineau.com/ @dcousineau dcousineau@gmail.com
  • 3. What Is jQuery Mobile?
  • 4. Multi Platform Images from jquerymobile.com
  • 5. Touch-optimized & Themable Images from jquerymobile.com
  • 6. Mobile Web Framework Unified User Interface My Term: Half Stack Widget Library Touch Events
  • 7. Project Status As of October 19th, 2011: RC2 This talk centers around RC1
  • 8. More Details Built on jQuery Lightweight (12k compressed) Progressive Enhancement HTML5 Accessibility baked-in (WAI-ARIA) Modular & Theme-able
  • 10. Provided Interface elements Simple device orientation detection Tap & mobile events DOES NOT PROVIDE Geo Location, Canvas, Local Storage, etc. Remember: A ‘HALF’ STACK
  • 11. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> </head> <body></body> </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
  • 12. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> Semantic & </head> <body></body> Progressive Refinement </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
  • 13. In The Beginning <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
  • 14. Configuration Configuration ONLY in mobileinit listener All mobileinit listeners defined BEFORE loading jQuery Mobile
  • 15. In The Beginning <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
  • 16. Think In Pages <div data-role=”page” /> Only 1 visible at any time Multiple allowed per document You can write a single-file application Contains header, footer, and content area
  • 17. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
  • 18. Progressive Enhancement Uses the HTML5 data-* attributes to auto-enhance and configure widgets data-role is now the center of your world. E.g. To create a button, add a <a href=”#” data- role=”button”>LABEL</a> and jQuery Mobile will automagically set it up during page creation.
  • 19. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <a href="#">Normal Link</a> <a href="#" data-role="button">Button</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
  • 20. jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0rc1
  • 21. Load jQueryMobile JS mobileinit domready pagebeforechange pagebeforecreate Enhance Page pagecreate pagehide pagebeforeshow pagebeforehide Navigate pageshow pagechange
  • 22. Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop
  • 23. Normalized “Virtual” Events vmouseover vmousedown vmousemove vmouseup vclick vmousecancel
  • 24. Auto-‘AJAX’ By default, all local links get a click listener Can be disabled Overrides default action: Fires XMLHTTP request for target Pulls <div data-role=”page”></div> from results, inserts into DOM Transitions to displaying the new target page
  • 25. Auto-‘AJAX’ By default, all local forms get a submission handler Same process as links, only overriding for form submit
  • 26. Auto-‘AJAX’ CAUTION: There is no baked-in way to pass parameters to AJAX’ed pages Sever side via GET requests to back-end Use #page?key=value, manually parse window.location Disable / override hash listener
  • 32. Advanced Learning Panel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/