jQuery Mobile tutorial for Beginners

jQuery Mobile is a set of jQuery plug-ins and widgets that aim to provide a cross-platform API for creating mobile web applications. In terms of code implementation, jQuery Mobile is very similar to jQuery UI, but while jQuery UI is focused on desktop applications, jQuery Mobile is built with mobile devices in mind. jQuery Mobile uses HTML 5 and CSS 3 features to enhance basic HTML markup to create a consistent mobile experience across supported platforms. See live demo here.


Live Demo

Create Your First jQuery Mobile Application

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>

<!-- The page starts -->
<section id="page1" data-role="page">
<!-- The header -->
<header data-role="header"><h1>jQuery Mobile</h1></header>
<!-- The header -->

<!-- The body -->
<div class="content" data-role="content">
<p>Welcome to jQuery Mobile!</p>
</div>
<!-- The body -->

<!-- The footer -->
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
<!-- The footer -->

</section>
</body>
</html>

jQuery Mobile doesn’t need specific markup, but it does need us to indicate the roles of the content areas somehow. To do this, jQuery Mobile uses a custom data- attribute: data-role. Valid data-role values include page, header, content, and footer. Adding a new page to the application is as simple as that. Just add a new HTML 5 section with data-role=”page” and it is done. See the following example.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Welcome to jQuery Mobile!</p>
<p><a href="#page2">Go to the second page!</a></p>
</div>
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Second page!</p>
<p><a href="#page1">Go to the first page!</a></p>
</div>
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
</section>

</body>
</html>

jQuery mobile will maintain the history of the navigation for you. jQuery Mobile will automatically handle the page transition animation, and will automatically provide a back button in the header. There you have it, your first jQuery Mobile application. It doesn’t do much, but it should give you some insight into the simplicity of the framework.

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/