Adding jQuery Mobile to Your Web Pages
There are two ways to add jQuery Mobile to your web site. You can:
- Link to a jQuery Mobile library stored at a CDN (recommended)
- Link to a jQuery Mobile library stored at your computer
Link to jQuery Mobile From a CDN
A CDN (Content Delivery Network) is used to distribute often-used files
across the web.
This makes download speed much faster for the user.
As with jQuery core, there is nothing to install on your computer; you just include the following stylesheet (.css) and JavaScript libraries (.js) directly into your HTML page, to get jQuery Mobile to work:
jQuery Mobile CDN:
<head>
<!-- Include meta tag to ensure proper rendering and touch
zooming -->
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Try it Yourself »
The viewport <meta> tag inside the <head> element specifies how the browser should control the page zoom level and dimensions.
The width=device-width sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 sets the initial zoom level when the page is first loaded by the browser.
Link to jQuery Mobile Stored at Your Computer
If you want to host the jQuery Mobile library yourself, you must first download it from jQuerymobile.com.
Then add the following code to your page:
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
Tip: Place the downloaded files in the same directory as the pages where you wish to use it.
Do you wonder why we do not have type="text/javascript" inside the <script> tag?
This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers!