jQuery Mobile - SPLessons

jQuery Mobile App

Chapter 3

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile App

jQuery Mobile App

shape Description

jQuery Mobile App chapter explains how to develop a simple Application using jQuery Mobile which includes the jQuery basic code along with the mobile JS and CSS, all external hosted from the jQuery CDN.

shape Step - 1

Create a folder named jQuery Mobile (or anything of own choice under any directory). Inside it, create folders named assets, images, javascript, styles(recommended).

shape Step - 2

Open text editor, goto File -> New File, then goto file -> Save as -> index.html (under….\ jQuery Mobile\)

shape Step - 3

Next one to be included is inform the browser about width of the page which is important for jQuery mobile app as if not specified that it may not look perfect on mobile devices. In the head tag of page, a meta viewport tag sets the screen width to the pixel width of the device.

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> 

jQuery Mobile library is linked by using CDN added using the following code to the jQuery Mobile App(recommended) inside <html> tag.

<!-- jQuery CDN hosted files --> 

<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.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

OR  

Add the downloaded(jquery.mobile-1.4.5) files(CSS to styles folder,.js folder) to javascript folder.(for offline)

Then add the following code to the page inside <html> tag.

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- jQuery local -->
	<link rel="stylesheet" type="text/css" href="….\jquery.mobile-1.4.5">
	<script type="text/javascript" src="….\jquery.mobile-1.4.5"></script>
	<script type="text/javascript" src="….\jquery.mobile"></script>

</head>

shape Example

 

<html>
	<head>
		<meta charset="UTF-8">
		<title>FirstApp</title>

		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">

		<!-- jQuery CDN hosted files -->

		<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.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

		<!-- jQuery local -->
		<!--<link rel="stylesheet" type="text/css" href="….\jquery.mobile-1.4.5">
		<script type="text/javascript" src="….\jquery.mobile-1.4.5"></script>
		<script type="text/javascript" src="….\jquery.mobile"></script>-->
	</head> 
	
	<body> 
	   <p>Welcome to SPLesson's jQuery Mobile</p>
	</body>
</html>

Output:

Summary

shape Key Points

  • Create a file and include CDN files in head tag.
  • Simple mobile applications can be developed using jQuery Mobile.