Home  >  jQuery Mobile

jQuery Mobile Framework with Simple Example

August 09, 2014
jQuery Mobile is a set of jQuery plug-ins and widgets. It provides a cross platform API for creating all popular smartphones web applications. jQuery mobile is completely web framework for creating mobile application. This includes two JS plugin and one CSS plugin for mobile page run.

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>  
Output
jQuery Mobile Framework with Simple Example
Run the example on any mobile simulator or simply in any computer browser. You will see the output as below.
FIND MORE TUTORILAS
comments powered by Disqus








Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us