Introduction to jquery mobile with Phonegap

Introduction to JQuery Mobile
Rakesh Kumar Jha
M.Tech, MBA

Contents
Introduction to jQuery Mobile (jQM)
Getting started with jQM
-Downloading the Most Recent Version of jQuery Mobile
-Proper Markup for Loading Framework JavaScript and CSS
jQuery Mobile Page Structure
-Page Anatomy: Header, Footer and Content Sections
-Header and Footer Toolbars
-Bundling Pages into a Single Document
-Navigating Between Pages
Applying Different Theme Swatches
Page Initialization Events
jQuery Mobile Page Components
Basic Content Formatting
List Views
-Ordered and Unordered Lists
-Inset Lists
-Lists with Links
-Nested Lists
-Lists with Icons or Thumbnail Images
-Split Button Lists
-List Dividers
-Search Filters
Form Controls - check boxes, slider, etc.

• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript
programming.
• jQuery is easy to learn

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

jQuery Introduction
• The purpose of jQuery is to make it much
easier to use JavaScript on your website.

What is jQuery
• jQuery is a lightweight, "write less, do more",
JavaScript library.
• The purpose of jQuery is to make it much
easier to use JavaScript on your website.

What is jQuery
• jQuery takes a lot of common tasks that
require many lines of JavaScript code to
accomplish, and wraps them into methods
that you can call with a single line of code

What is jQuery
• The jQuery library contains the following
features:
– HTML/DOM manipulation
– CSS manipulation
– HTML event methods
– Effects and animations
– AJAX
– Utilities

Why jQuery
• The jQuery library contains the following
features:
– Easy to use
– Less LOC
– Simplify code
– Rich api

jQuery Install
• There are several ways to start using jQuery
on your web site. You can:
– Download the jQuery library from jQuery.com
– Include jQuery from a CDN, like Google

Downloading jQuery
• There are two versions of jQuery available for
downloading:
– Production version - this is for your live website
because it has been minified and compressed
– Development version - this is for testing and
development (uncompressed and readable code)
http://jquery.com/download/

Downloading jQuery
• The jQuery library is a single JavaScript file,
and you reference it with the HTML <script>
tag (notice that the <script> tag should be
inside the <head> section):
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>

jQuery CDN
• If you don't want to download and host
jQuery yourself, you can include it from a CDN
(Content Delivery Network).
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque
ry.min.js"></script>
</head>

jQuery CDN
<!DOCTYPE html>
<html>
<head>
<script>
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery Syntax
• With jQuery you select (query) HTML
elements and perform "actions" on them.
• The jQuery syntax is tailor made
for selecting HTML elements and performing
some action on the element(s).

jQuery Syntax
• Basic syntax is: $(selector).action()
– A $ sign to define/access jQuery
– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the
element(s)

jQuery Syntax
• Examples:
– $(this).hide() - hides the current element.
– $("p").hide() - hides all <p> elements.
– $(".test").hide() - hides all elements with
class="test".
– $("#test").hide() - hides the element with
id="test".

The Document Ready Event
$(document).ready(function()
{
// jQuery methods go here...
});
This is to prevent any jQuery code from running
before the document is finished loading (is
ready).

• It is good practice to wait for the document to
be fully loaded and ready before working with
it.
• This also allows you to have your JavaScript
code before the body of your document, in
the head section.

• Here are some examples of actions that can
fail if methods are run before the document is
fully loaded:
– Trying to hide an element that is not created yet
– Trying to get the size of an image that is not
loaded yet

• The jQuery team has also created an even
shorter method for the document ready
event:
$(function(){
// jQuery methods go here...
});

The element Selector
• All selectors in jQuery start with the dollar
sign and parentheses: $().
• The jQuery element selector selects elements
based on the element name.
• You can select all <p> elements on a page like
this:

jQuery selectors
• jQuery selectors are one of the most
important parts of the jQuery library
• jQuery selectors allow you to select and
manipulate HTML element(s)
• jQuery selectors are used to "find" (or select)
HTML elements based on their id, classes,
types, attributes, values of attributes

jQuery selectors
<!DOCTYPE html>
<html>
<head>
<script>
$("p").hide();
});
});
</script>
</head>
<body>
</body>
</html>

The #id Selector
• The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
• An id should be unique within a page, so you
should use the #id selector when you want to
find a single, unique element.

The #id Selector
• To find an element with a specific id, write a
hash character, followed by the id of the HTML
element:
$("#test")

The #id Selector
<!DOCTYPE html>
<html>
<head>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">This is another paragraph.</p>
</body>
</html>

The .class Selector
• The jQuery class selector finds elements with
a specific class.
• To find elements with a specific class, write a
period character, followed by the name of the
class:
$(".test")
•

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
</body>
</html>

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$("*").hide();
});
});
</script>
</head>
<body>
</body>
</html>

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
</body>
</html>

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$("p.intro").hide();
});
});
</script>
</head>
<body>
<h2 class="intro">This is a heading</h2>
<p class="intro">This is a paragraph.</p>
</body>
</html>

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$("ul li:first").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>

The .class Selector
<!DOCTYPE html>
<html>
<head>
<script>
$("ul li:first-child").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>

Functions In a Separate File
• If your website contains a lot of pages, and
you want your jQuery functions to be easy to
maintain, you can put your jQuery functions in
a separate .js file.
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min
.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery Event Methods
• jQuery is tailor-made to respond to events in
an HTML page.

What are Events?
• All the different visitor's actions that a web
page can respond to are called events.
• An event represents the precise moment
when something happens.
• Examples:
– moving a mouse over an element
– selecting a radio button
– clicking on an element

What are Events?
Mouse Events Keyboard
Events
Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery Syntax For Event Methods
• In jQuery, most DOM events have an
equivalent jQuery method.
• To assign a click event to all paragraphs on a
page, you can do this:

jQuery Syntax For Event Methods
$("p").click();
• The next step is to define what should happen
when the event fires. You must pass a function
to the event:
$("p").click(function(){
// action goes here!!
});

Commonly Used jQuery Event
Methods
• $(document).ready()
• click()
• dblclick()
• mouseenter()
• mouseleave()
• mousedown()
• mouseup()
• hover()
• focus()
• blur()

<!DOCTYPE html>
<html>
<head>
<script>
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

Page Anatomy: Header, Footer and
Content Sections

Header and Footer Toolbars
• Toolbar elements are often placed inside
headers and footers - for "easy-access"
navigation:

Header Bars
• The header is located at the top of the page
and usually contain a page title/logo or one or
two buttons (typically home, options or
search).
• You can add buttons to the left and/or to the
right side in the header.

Header Bars
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
</div>
<div data-role="main" class="ui-content">
<p>Notice that we have added the CSS class of "ui-corner-all" and "ui-shadow" to the header buttons, to make them look a bit more
desirable.</p>
</div>
</div>
</body>
</html>

Header Bars
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
</div>
</body>
</html>

Header Bars
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Search</a>
</div>
</body>
</html>

Footer Bars
• The footer is located at the bottom of the
page.
• The footer is more flexible than the header - it
is more functional and changeable throughout
pages, and can therefore contain as many
buttons as needed:
• The buttons in the footer are not centered by
default. To fix this, simply use CSS:
<div data-role="footer" style="text-align:center;">

Footer Bars<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a>
</div>
<p>The buttons are for demonstration purposes only, and will not have any effect.</p>
<p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>
</body>
</html>

Positioning Headers and Footers
• The header and the footer can be positioned
in three ways:
– Inline - Default. Headers and footers are inline
with the page content
– Fixed - Headers and footers will remain positioned
at the top and bottom of the page
– Fullscreen - Behaves like fixed; headers and
footers will remain positioned at the top and
bottom, but also over the page content. It is also
slightly see-through

Positioning Headers and Footers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="header" data-position="fixed">
<h1>Inline Header</h1>
</div>
<p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>
<p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to
enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
</div>
<div data-role="footer" data-position="inline">
<h1>Inline Footer</h1>
</div>
</div>
</body>
</html>

Navigating Between Pages
• A navigation bar consists of a group of links
that are aligned horizontally, typically within a
header or footer
• The bar is coded as an unordered list of links
wrapped inside a <div> element that has the
data-role="navbar" attribute

Navigating Between Pages
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Search</a></li>
</ul>
</div>
</div>
<p>My Content..</p>
</div>
<h1>My Footer</h1>
</div>
</div>
</body>
</html>

Icons in Navigation Buttons
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="arrow-r">Page Two</a></li>
<li><a href="#" data-icon="search">Search</a></li>
</ul>
</div>
</div>
<p>My Content..</p>
</div>
<h1>My Footer</h1>
</div>
</div>
</body>
</html>

Active Buttons
• When a link in the navbar is tapped/clicked, it
gets the selected (pressed down) look.
• To achieve this look without having to tap the
link, use the class="ui-btn-active":

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>
</ul>
</div>
</div>
<p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
<p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
</div>
<h1>My Footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<ul>
<li><a href="#pageone" data-icon="home">Home</a></li>
<li><a href="#" data-icon="arrow-r">Page Two</a></li>
</ul>
</div>
</div>
<p>No buttons are pre-selected (highlighted) in this page..</p>
<p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
</div>
<h1>My Footer</h1>
</div>
</div>
</body>
</html>

• jQuery Mobile provides two different style
themes, "a" and "b" - each with different
colors for buttons, bars, content blocks, and so
on.

• To customize the look of your application, use
the data-theme attribute, and assign the
attribute with a letter:
<div data-role="page" data-theme="a|b">

Theme a
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="pageone" data-theme="a">
<h1>Page Header</h1>
</div>
<p>Some Text..</p>
<a href="#">A Standard Text Link</a>
<a href="#" class="ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role="listview" data-autodividers="true" data-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
</ul>
<label for="fullname">Input Field:</label>
<input type="text" name="fullname" id="fullname" placeholder="Name..">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off" selected>Off</option>
</select>
</div>
<h1>Page Footer</h1>
</div>
</div>
</body>
</html>

Theme a
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-role="page" id="pageone" data-theme="b">
<h1>Page Header</h1>
</div>
<p>Some Text..</p>
<a href="#">A Standard Text Link</a>
<a href="#" class="ui-btn">Link Button</a>
<p>A List View:</p>
</ul>
<label for="fullname">Input Field:</label>
<input type="text" name="fullname" id="fullname" placeholder="Name..">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off" selected>Off</option>
</select>
</div>
<h1>Page Footer</h1>
</div>
</div>
</body>
</html>

jQuery Mobile Pages
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</div>
<p>I Am Now A Mobile Developer!!</p>
</div>
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>

jQuery Mobile Pages
• The data-role="page" is the page displayed in the
browser
• The data-role="header" creates a toolbar at the top of
the page (often used for title or search buttons)
• The data-role="main" defines the content of the page,
like text, images, buttons, forms, etc.
• The "ui-content" class adds extra padding and margin
inside the page content
• The data-role="footer" creates a toolbar at the bottom
of the page
• Inside these containers, you can add any HTML
elements - paragraphs, images, headings, lists, etc.

Adding Pages in jQuery Mobile
• In jQuery Mobile, you can create multiple
pages in a single HTML file.
• Separate each page with a unique id and use
the href attribute to link between them:

Adding Pages in jQuery Mobile
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</div>
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
<a href="#pageone">Go to Page One</a>
</div>
</div>
</div>
</body>
</html>

Using Pages as Dialogs
• A dialog box is a type of window used to show
special information or request input.
• To create a dialog box that opens when a user
taps on a link, add data-dialog="true" to the
page you want displayed as a dialog:

Using Pages as Dialogs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</div>
<p>Welcome!</p>
<a href="#pagetwo">Go to Dialog Page</a>
</div>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<h1>I'm A Dialog Box!</h1>
</div>
<p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to
close the box.</p>
<a href="#pageone">Go to Page One</a>
</div>
<h1>Footer Text In Dialog</h1>
</div>
</div>
</body>
</html>

jQuery Mobile List Views
• List views in jQuery Mobile are standard HTML
lists; ordered (<ol>) and unordered (<ul>).
• To create a list, apply the data-role="listview"
to the <ol> or <ul> element. To make the
items tappable, specify a link inside each list
item (<li>):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Ordered List:</h2>
<ol data-role="listview">
<li><a href="#">List Item</a></li>
</ol>
<h2>Unordered List:</h2>
<ul data-role="listview">
</ul>
</div>
</div>
</body>
</html>

• To style your lists with rounded corners and
some margin, use the data-inset="true"
attribute:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>A standard list:</h2>
<ul data-role="listview">
</ul><br>
<h2>List with data-inset="true":</h2>
<ul data-role="listview" data-inset="true">
</ul>
</div>
</div>
</body>
</html>

List Dividers
• List dividers are used to organize and group
items into categories/sections.
• To specify a list divider, add the data-role="list-
divider" attribute to an <li> element:

List Dividers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>List Dividers</h2>
<li data-role="list-divider">Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
<li data-role="list-divider">Asia</li>
<li><a href="#">India</a></li>
<li><a href="#">Thailand</a></li>
<li data-role="list-divider">Africa</li>
<li><a href="#">Zimbabwe</a></li>
<li><a href="#">Uganda</a></li>
</ul>
</div>
</div>
</body>
</html>

List Dividers
• If you have an alphabetically list, (for example
a phone book) jQuery Mobile automatically
adds appropriate dividers by setting the data-
autodividers="true" attribute on the <ol> or
<ul> element:

List Dividers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>My Phonebook</h2>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
<p>The data-autodividers="true" attribute creates dividers where it is appropriate with uppercased first letters of the item's text.</p>
</div>
</div>
</body>
</html>

jQuery Mobile List Icons
• The default icon for each list item containing a
link is "carat-r" (right arrow).
• To change this to another icon, use the data-
icon attribute on the list item you want to
modify:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>List Icons:</h2>
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
</div>
</div>
</body>
</html>

data-icon="false" will remove the icon
• To add a standard 16x16px icon to your list,
add an <img> element inside the link with a
class of "ui-li-icon":

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>List With Icons:</h2>
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
<li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
<li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
<li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
<li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
</ul>
</div>
</div>
</body>
</html>

jQuery Mobile List Thumbnails
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>List With Icons:</h2>
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
<li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
<li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li>
<li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li>
<li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li>
</ul>
</div>
</div>
</body>
</html>

Introduction to jquery mobile with Phonegap

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Introduction to jquery mobile with Phonegap

Similar to Introduction to jquery mobile with Phonegap (20)

More from Rakesh Jha

More from Rakesh Jha (20)

Introduction to jquery mobile with Phonegap