What is jQuery Mobile ?

Last Updated : 06 Sep, 2021

What is jQuery Mobile?

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 works on 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 works on the basis of “write less, do more”.
It is 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 it?

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 –

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 example describes how to use jQuery Mobile classes in web application.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" content= 
        "width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div data-role="page" id="pageone"> 
        <div data-role="header"> 
            <h1>GeeksforGeeks</h1> 
        </div> 
  
        <div data-role="main" class="ui-content"> 
            <p> 
                A Computer Science portal for geeks. It  
                contains well written, well thought and  
                well explained computer science and  
                programming articles, ... 
            </p> 
        </div> 
  
        <div data-role="footer"> 
            <p>Thanks for visiting GeeksforGeeks!</p> 
        </div> 
    </div> 
</body> 
  
</html>