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.
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). Step - 2
Open text editor, goto File -> New File, then goto file -> Save as -> index.html (under….\ jQuery Mobile\)
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.
[html]
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
[/html]
jQuery Mobile library is linked by using CDN added using the following code to the jQuery Mobile App(recommended) inside
<html> tag.
[html]
<!-- 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>[/html]
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.
[html]
<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>
[/html] Example
[html]
<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>
[/html]
Output:
Key Points
- Create a file and include CDN files in head tag.
- Simple mobile applications can be developed using jQuery Mobile.