jQuery Mobile Framework with Simple Example
August 09, 2014
jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. CSS3 and HTML5 give animated look in button and slider. In Smartphone application we do not use large image or image icon, we use small and standard size of graphics for navigation and other menu.
How jQuery Mobile Works
jQuery mobile uses web framework and HTML5, CSS3 features to enhance basic HTML to create a consistent mobile experience across supported platforms. HTML5 and CSS3 support all smartphone browsers. Mobile application will not work without including both JS file.In mobile application , jQuery Mobile uses meta tag viewport and attribute data-roll in div tag.
meta tag "viewport" : Viewport is used inside head tag. Viewport sets screen width to pixel width of the device.
data-roll : It is used inside body tag with DIV tag. Data-roll is used to divide wrapper. By data-roll we can separate header section, content section and footer section.
How to Link jQuery Mobile Library in Code
All Smartphone will work with jQuery framework. Without adding framework not any application will run in mobile. There are two ways to add jQuery mobile to your web page.1. Download jQuery library in your computer
Download jQuery library in your computer and link to page. All library files should link inside section and provide local folder path.
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.2.css"> <script src="jquery.js"></script> <script src="jquery.mobile-1.4.2.js"></script> </head>
2. jQuery Mobile library Online
Link jQuery Mobile library from recommended path online. In this way no need to download library file in your computer. You can include the following stylesheet (.css) and JavaScript libraries (.js) directly into your HTML page.
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head>
Create First Simple jQuery Mobile Application
In mobile application, web page is divided in header section, content section and footer section. All html5 tag and css3 properties support for application. jQuery Mobile uses a custom data-attribute: data-role. Valid data-role values include page, header, content, and footer.Example
<!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.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="main" class="ui-content">
<p>www.concretepage.com</p>
</div>
<div data-role="footer">
<h1>Page footer</h1>
</div>
</div>
</body>
</html>
