Jam3 Mobile
Back

What is jQuery Mobile?

This is jQuery Mobile!

The Foundation - jQuery Outline

Website: http://www.jquery.com

Creator: John Resig @jeresig

Initial Release: August 26, 2006

jQuery is Open Source

jQuery is developed under a MIT & GPL License

Used By Millions

Used by over 49% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

  • Google
  • NBC
  • Dell
  • MLB
  • CBS
  • Netflix
  • TurboTax

The Extension - jQuery Mobile Outline

  • Built on jQuery core
  • Compatible with all major mobile, tablet, e-reader & desktop platforms
  • Lightweight size and minimal image dependencies for speed.
  • HTML5 Markup-driven configuration
  • Responsive design techniques and tools
  • Powerful Ajax-powered navigation system
  • Touch and mouse event support
  • Unified UI widgets
  • Powerful theming framework
  • ThemeRoller



So Why Should I Use It?

Back

Why Use jQuery Mobile?

So Easy, Your Mom Could Make Mobile Apps

  • Easy to follow API
  • Well documented examples
  • Large community - constant progression

Your Mobile App, Free From Platform Dependency

Write your application once, deploy it however you wish

jQuery Mobile is also compatible with applications like PhoneGap and Worklight.

Forget About Specialized Mobile Developers

Save money, time and developer head count.

  • HTML
  • CSS
  • JavaScript
  • jQuery

Freedom From App Store Moderation

  • Launch your site when you want
  • Never wait for update approvals
  • It's your site and your content, do what you wish
  • No developer fees. All platforms are free and easy to use

Open Source

Fork jQuery Mobile on GitHub

So How Do I Use It?
Back

How To Use jQuery Mobile

Get Your Mobile Site Setup in Minutes!

Step 1 - Include jQuery Mobile JavaScript and CSS

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

Step 2 - Setup Basic HTML Page Structure

<body> 
<!-- Start of first page -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p>View internal page called <a href="#bar">bar</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p><a href="#foo">Back to foo</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>

Step 3 - View The Hardwork

Basic Page Template
Back

Limitations

0 Images Loaded

Bring on Another 10 1MB Images!

Header

Getthing the library up and running is easy, now it is time to customize.

Footer

Back

Customizing jQuery Mobile

jQuery Mobile

Page Viewport Settings

Setting Inital Viewport Scale

By setting the viewport attributes to content="width=device-width, initial-scale=1, the width will be set to the pixel width of the device screen.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> Inital Scale Example

Disable User Scaling (Zooming)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> Disabled User Scaling Example

Page Structure

Single HTML Page Setup


<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Foo</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p>View internal page called <a href="#bar">bar</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

	<div data-role="header">
		<h1>Bar</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>I'm first in the source order so I'm shown as the page.</p>		
		<p><a href="#foo">Back to foo</a></p>	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>

Multi HTML Page Setup

Link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible.

Dialogs

<a href="foo.html" data-rel="dialog">Open dialog</a> Open dialog

Toolbars

Headers

	<div data-role="header">
		<h1>Page Title</h1> 
	</div>

Page Title



	<div data-role="header" data-position="inline">
		<a href="index.html" data-icon="delete">Cancel</a>
		<h1>Edit Contact</h1>
		<a href="index.html" data-icon="check">Save</a>
	</div>

Cancel

Edit Contact

Save

Footers

	<div data-role="footer"> 
		<h4>Footer content</h4> 
	</div>

Footer content



	<div data-role="footer" class="ui-bar">
		<a href="index.html" data-role="button" data-icon="delete">Remove</a>
		<a href="index.html" data-role="button" data-icon="plus">Add</a>
		<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
		<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
	</div>

Remove Add Up Down

Buttons

<a href="#pagename" data-role="button">Button Text</a> Button Text

Forms

Examples

Lists



    • Built in Themes

    jQuery Mobile comes packages with 5 themes.

    Bar A
    Bar B
    Bar C
    Bar D
    Bar E

    Theme Roller

    Visit Theme Roller

    Events

    Page Events

    • pagebeforeload
    • pageload
    • pageloadfailed
    • pagebeforechange
    • pagechange
    • pagechangefailed
    • pagebeforeshow
    • pagebeforehide
    • pageshow
    • pagehide
    • pagebeforecreate
    • pagecreate
    • pageinit
    • pageremove

    Touch Events

    3rd Party

    iOS Hacks

    Hiding the Safari Menu

    Hide on Home Screen Bookmark

    <meta name="apple-mobile-web-app-capable" content="yes" />

    Geolocation

    Finding Your Location...

    HTML5 Video

    Some Warnings Before You Go Play
    Back

    Nice Transition!

    Nice work.
    Back

    Touch Event Example

    Swipe & Tap Event Demo