jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.
jQuery Mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique applications for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded responsive website or application that will work on all popular smartphone, tablet, and desktop platforms.
Features of jQuery Mobile:
- It is based on the “write less, do more” mantra.
- Used for making responsive websites and apps.
- It is open-source and a cross-platform-compatible framework.
- It uses features of jQuery and jQuery UI for making mobile compatible websites.
How to use?
We can add jQuery Mobile to our project in two ways:
- Downloading the package files
- Using CDN Link
Downloading Package: When you will open the main website of jQuery Mobile i.e. jquerymobile.com/, you will see there are two options to download jQuery mobile library.
- Custom Download − This option is used to download a customized version of library.
- Latest Stable − This option is used to get the stable and latest version of jQuery mobile library.
Using CDN Link: We need to include three CDN links for including jQuery Mobile to our project. These three links are for:
- Including jQuery Mobile stylesheets
- Including the jQuery library
- Including the jQuery Mobile library
<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>
Example: This is a basic example of a website using some jQuery Mobile classes.
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content=
"width = device-width, initial-scale = 1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Hello Geeks!</h1>
</div>
<div data-role="main" class="ui-content">
<h2> Welcome to GeeksforGeeks</h2>
</div>
<div data-role="footer">
<p>Hope you have a great day!</p>
</div>
</div>
</body>
</html>
|
Output: