jquery mobile tutorial step by step part-1

Published on : April 27, 2026

What is Jquery Mobile?

Jquery Mobile Can Define In May Ways..

jQuery Mobile is a cross platform mobile framework designed to simplify and enhance
the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery
UI into one framework that is not only robust, but maintainable and organized.

Or

Seriously cross-platform with HTML5
devices jQuery Mobile framework takes the “write less, do more” mantra to the next level:
Instead of writing unique applications for each mobile
device or OS, the jQuery mobile framework allows you to design a single highly-branded
responsive web site or application that will work on all popular smartphone, tablet, and desktop platforms.

Or

A Touch-Optimized Web Framework
jQuery Mobile is a HTML5-based user interface system designed to make responsive web
sites and apps that are accessible on all smartphone, tablet and desktop devices.

With Jquery Mobile We Can

Built Responsive Mobile Website
Web Application
Mobile Application For All platform (like android, Apple iOS, Windows Mobile , almost all platfome)

Before Starting Jquerymobile someting must know

HTML
CSS and CSS3
Jquery

For Details About Jquery Mobile Go To JQuerymobile Official website Click Here

Now We Are Making our first Jquerymobile Web Page

Step 1

Download Jquery Mobile Library (http://jquerymobile.com/download/).
You Can Make Custom Library by Download Builder (http://jquerymobile.com/download-builder/)

Step 2

Importing Library For Form Download Library in Head

[code language=”html”]
<head>
<!– Include meta tag to ensure proper rendering and touch zooming –>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!– Include jQuery Mobile stylesheets –>
<link rel="stylesheet" href="lib/jquerymobile/jquery.mobile-1.4.5.min.css">
<!– Include the jQuery library –>
<script src="lib/jquery-1.11.2.min.js"></script>
<!– Include the jQuery Mobile library –>
<script src="lib/jquerymobile/jquery.mobile-1.4.5.min.js"></script>
</head>
[/code]

Use CDN For Developing Jquery Mobile

[code language=”html”]
<head>
<!– This is used latest Jquery Mobile Library –>
<!– For rendering and touch zooming Meta Tag–>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!– Include jQuery Mobile stylesheets –>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!– Include the jQuery library –>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!– Include the jQuery Mobile library –>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
[/code]

Step 3

Creating First Page

Baisc Things You Will Chose First

Your App is single Page
In a single page there can be multiple page which define by “id” (example login page is index.html#login and register page index.html#register)
Your App is multipage
Here i say multiple page app like when we make login.html for login and for register use register.html and linking those page between theme self

For Small Applicaiton it is good practics to use single page for application

A Simple Page With Jquery Mobile

[code language=”html”]
<!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.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

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

<div data-role="main">
<p>This Is A Sample Page</p>
</div>

</body>
</html>
[/code]

Example explained:

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.

Making Multiple Page in Single Page

<!– This Is Page Two –>
<div data-role="page" id="page-two">
<div data-role="header">
<h1>Page Two</h1>
</div>

</body>
</html>
[/code]