Developing Mobile Web Apps using jQuery Mobile [TUTORIAL]

With more than 60 percent of the internet traffic coming from Mobile Phones, it has never been more important to optimize your website so that it has a better user experience on mobile devices. Unlike desktop users, people browsing the internet on their phone face tons of problems such as slower loading times or smaller screen sizes.

The average user is much less likely to return to your website again if it is slow to load or is not responsive enough to work on touch interfaces.

Things such as smaller buttons/text or in general desktop type interfaces on mobile websites can not only make the experience bad, but can also affect search engine rankings.

Yes, you heard that right – with popular search engines such as Google aiming to provide the best possible experience to its users, a non-mobile-friendly website is much less likely to be ranked higher on search results – despite the content.

But, do not worry – in this tutorial we’ll tackle this problem using a framework called jQuery Mobile. This framework was built from group-up keeping in mind the rise of mobile internet users. It aims to provide developers with a smooth & easy experience in making mobile-friendly web applications.

What is jQuery & jQuery Mobile?

jQuery is a lightweight javascript library used to build standard html/css/javascript websites. But, with much cleaner and shorter code. It accomplishes this by providing easy to use functions that help in animations, event handling , and manipulating the UI. Although, it is technically true that all of this can be done by using vanilla javascript – the difference arises in time taken and code readability

Along with its standard library that was released in 2006. jQuery also realized that web on mobile will grow big, and hence decided to make Mobile Web Development easier by launching jQuery Mobile.

jQuery Mobile was designed to be used alongside jQuery. It had additional features that made all of the elements Touch Optimized by default. It also came with prebuilt widgets including Buttons, Selectors, Input Sliders, Navbars and a lot more!

Most of these widgets that came with jQuery Mobile required very little tinkering to do as they were already optimized – both in design and functionality to run on touch screen devices such as Mobile Phones. This allowed developers to quickly release mobile versions of their websites without having to spend extra time or resources.

The Final Mobile Web App Using jQuery Mobile

There is no better way to learn something than to build a small functional application using it. By following the philosophy of “learn by doing” we can ensure that not only do we understand concepts in the moment – but we also retain them for longer periods of time.

In this tutorial, we’ll be working on a Gamer Survey website which aims to collect important data such as Age, Playing Hours, Recently Played Games all while using tons of jQuery Mobile Features. This way, we’ll cover almost all the important functionality that jQuery Mobile provides

At the end, we’ll also be adding a dark theme to the app to give it a more modern look.

To keep you excited, here’s a demo of the final application:

Part#1 – Installing the Required Tools for jQuery Mobile Development

Since jQuery is a lightweight JavaScript library and not a fully fledged framework like Angular or React there are very few – but important tools to be installed

IDE ( Optional )

Since we’ll be writing code to build a jQuery Mobile App we need a Code Editor or an IDE ( Integrated Development Environment ).

If you don’t know what an IDE is, it’s a program which provides features such as Syntax Highlighting, Error Detection, and much more.

There are many popular IDE’s on the market ( Sublime text, Atom, Notepad++, etc )

But for our purposes we’ll be using Visual Studio Code, which has the most features, and is a good choice for both beginners and advanced users

Browser

Any modern browser that can run standard HTML Websites such as Google Chrome or Firefox

Part#2 – Setting up the Gamer Survey Project using jQuery Mobile

To create a new jQuery Mobile project, we start by

• Creating a project folder gamer_survey and adding an index.html file to it

In this particular project, we won’t be needing to add any css or javascript files as jQuery Mobile already comes with pre-built widgets that have styling & animations included by default!

• Inside the index.html file, we get started by writing standard HTML starter code

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Gamer Survey</title>
 </head>
 <body></body>
</html>

• In the above code, we start off by writing <!DOCTYPE html> to declare that this is an html document
• Then, inside the <html> tag, we add <head> and <body> elements. If you haven’t worked with HTML before, <head> tag contains all of the Metadata or Website Information that is not displayed to the user. Whereas, every element inside the <body> tag is visible to the user
• In the <head> tag, we have a few <meta> tags that are here by default, but we don’t have to worry about them. The only important thing inside <head> is the <title> tag. It contains, as you guessed – the page title

Now that we are done with setting up the HTML file, it’s time to add jQuery Mobile. To do that we’ll be using a free service called CDNJS. If you’ve never heard of them, cdn.js provides links and <script> tags for almost all popular libraries & frameworks.

This way, you don’t have to spend time looking through the official website of frameworks anymore as CDNJS can work as a centralized space to find direct links to popular frameworks and libraries

• Visit the official website of cdn.js and search for jQuery Mobile

• Copy the <link> and <script> tags for the .js and .css files shown above

Since jQuery Mobile depends on jQuery, we have to install that as well. Luckily, the process is just like the one shown above and can be done using cdn.js

It is however important to note that the last version of jQuery Mobile – 1.4.5, DOES NOT support the latest jQuery version. This is because jQuery Mobile is currently an abandoned project and is not supported anymore.

However, we can still make things work in this tutorial by installing an older version of jQuery – 2.1.0. ( Released in 2014 )

Copy all of the <script> and <link> tags collected from cdnjs and simply insert them in top of the <head> tag like shown below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />

It is important that the jQuery <script> tag stays above the jQuery Mobile tag. This is because jQuery Mobile depends on jQuery to be present for it to work properly.

NOTE: It is always better to put the <script> tags at the end of the HTML code. This allows for websites to load faster as the main text content is loaded before heavy scripts are. However, this can be neglected for a small application like the one we’re working with.

Part#3 – Creating Pages for the jQuery Mobile Application

Now that we are done with the setup and have jQuery Mobile installed, it’s time to get started working on the web application. Before we get started, however, it’s important to understand the concept of Pages in jQuery Mobile

In jQuery Mobile world, Pages can be considered as Individual Screens. For example, a website may have an Home Page & an About Us page just like the Gamer Survey app that we’re working on.

The way that pages work is –

• There can be code for multiple pages in the same index.html file
• The way that pages are distinguished from each other is by having a unique ID ( For eg <div id=”page1”>
• Any <div> element can be declared as a page simply by passing the data-role= “page” attribute to that element.
• To switch between pages, we can simply use the default link tags <a href= “#id”> where id is the id of the page that you want to switch to

Let’s use the following code to create two pages for the application.

    <div data-role="page" id="survey">
     <div data-role="header"></div>
     <div class="ui-content"></div>
     <div data-role="footer"></div>
   </div>    <div data-role="page" id="about-us">
     <div data-role="header"></div>
     <div class="ui-content"></div>
     <div data-role="footer"></div>
   </div>

• In the above code, we created two pages by making two <div> elements and assigning them an attribute of data-role= “page”
• To identify them uniquely and to switch between them, we also need to assign IDs to these pages. In the above code, the pages are assigned ID values of #survey and #about-us
• Although it is not mandatory to do so, but almost every jQuery Mobile Page is divided into three sections: header, content and footer
• Therefore, we create three child <div> elements inside the parent <div> and assign them as header/footer by using the data-role attribute

NOTE: By default jQuery Mobile displays the page that comes first in the HTML file

Then, just like in the final application, we design the header section. To simply be a Navbar that simply displays the website title

<div data-role="navbar">
  <h1 class="ui-title">Gamer Survey</h1></div>

• Firstly, we specify that the header element will be a navbar using the data-role= “navbar” attribute
• Inside the navbar, we simply have an <h1> tag that displays the website title – Gamer Survey
• To give the title a good styling we use the pre-built jQuery Mobile Class of ui-title

Note: It is important to add this navbar in both the pages as page switches remove all the elements inside – including the navbar

Similarly, let’s design the footer to display two options to choose from – Home Page and the About Page

<div data-role="navbar">
     <ul>
       <li>
         <a href="#survey" data-icon="home" class="ui-btn-active">Home</a>
       </li>
       <li>
         <a href="#about-us" data-icon="info">About Us</a>
       </li>
     </ul>
</div>

• The above code should be pretty simple to understand as it is just a basic jQuery Mobile Navbar
• A Navbar can have multiple navigation options – or multiple pages that it can navigate
• To declare the navigation options for a navbar, we simply use an unordered list <ul> which has multiple list elements each of them containing links to that particular page
• It is important to note that these links must have correct id values that represent the corresponding page
• Finally, for this navbar to work properly, it has to be present on every page

Part#4 – Adding Basic Form Elements to the jQuery Mobile App

After having the basic structure of the pages ready, it’s time to work on the homepage and design all of the form elements such as Sliders, Input Boxes, Radio Buttons, Check Boxes and a lot more!

Let’s get started by writing a simple heading for the form using the <h1> tag as shown below

<h1>Please help us by answering the following survey!</h1>

If you look the final web app closely, you realize that each form element has two parts

1. a label
2. The input element itself

In HTML a form label is linked to the form element by using the for= “#id” property. Here, #id represents the id of the form element

Option Selector using jQuery Mobile

     <label for="age" class="select">What is your age?</label>
       <select name="age" id="age" data-native-menu="false">
         <option></option>
         <option value="under13"><13</option>
         <option value="13to18">13-18</option>
         <option value="18-25">18-25</option>
         <option value="above25">25+</option>
       </select>

• In the code above, we firstly use the <label> tag to attach a question to the form element
• Then, we use the standard <select> tag provided by HTML and give it a name and an id ( It is important that this #id matches the one inside the label for= “#id” )
• Inside the <select> menu we declare all the possible options for different ages by using the <option> tag provided by HTML
• Lastly, to give custom styling to this <select> menu, we pass it the data-native-menu= “false” attribute. This ensures that the default native stying of the <select> tag is not used.

Range Slider using jQuery Mobile

     <label for="hours">How many hours do you play daily ? </label>
       <input
         type="range"
         id="hours"
         value="1"
         min="0"
         max="24"
         step="1"
         data-highlight="true"
       />

• Similar to the option selector, we start by declaring a <label> tag relevant to the form element
• Then, we add an <input> tag providing it with the following attributes

1. Type: range is an html property used to declare that this particular <input> element is a range slider
2. Id: hours is a standard id property for this element. The same id also used in the label for= “” property to link both of these together
3. Min: 0 and Max: 24 represent the minimum and maximum values attainable by this slider. Since a day has a maximum of 24 hours. 0-24 would be an ideal choice for min & max attributes
4. Step: 1 ensures that there are no decimal / floating point values and all possible values have a difference of 1 ( for eg: 0,1,2,3,4….24 )
5. Value: 1 is the initial or default value of the slider. It can be anything between 0 and 24
6. Data-highlight: True is a decorative property that adds a light blue highlighting color to the range slider

Radio Buttons using jQuery Mobile

<fieldset data-role="controlgroup">
             
         <legend>
           Do you find that gaming interferes with your social / academic life?
         </legend>
         <input type="radio" name="yes" id="yes" value="yes" /><label for="yes"
           >Yes</label
         >

         <label for="no">No</label
         ><input type="radio" name="no" id="no" value="no" />
</fieldset>

• Usually, Radio Buttons are used when only one option can be selected out of a list of possible options
• In jQuery Mobile to use Radio Buttons and Checkboxes they are wrapped in a <fieldset> tag and are given a data-role value of “controlgroup”
• The title of this particular fieldset is set by using the <legend> tag. This is different from a <label> tag.
• <label> tags are used to set labels for individual form elements. In this case, the possible options are individual form elements therefore, they have to be named by using the <label> tag
• However, to name a group of <input> tags or a <fieldset> the <legend> tag is used
• In the above code, we make <label> and <input> for both the possible options Yes and No

Checkboxes using jQuery Mobile

    <fieldset data-role="controlgroup">
         <legend>Have you played any of these games recently?</legend>
         <input type="checkbox" name="bgmi" id="bgmi" /><label for="bgmi"
           >Call of Duty</label
         ><input type="checkbox" name="Among Us" id="amongus" /><label
           for="amongus"
           >Among Us</label
         ><input type="checkbox" name="Fall Guys" id="fallguys" /><label
           for="fallguys"
           >Fall Guys</label
         >
       </fieldset>

• Just like Radio Buttons, we declare a <fieldset> and give it a data-role of controlgroup
• Then, we declare <input> and <label> elements containing the possible options
• The only real difference between this code and the one in Radio Buttons is that we are using <input type= “checkbox”> in this code.
• Lastly, to name the entire options group, we use the <legend> tag which contains the appropriate question.

Yes/No Switch using jQuery Mobile

        <label for="tc"
         >I have understood & agree with the Terms & Conditions
       </label>
       <select name="tc" id="tc" data-role="slider" data-mini="true">
         <option value="off">No</option>
         <option value="on">Yes</option>
       </select>

• jQuery Mobile also supports a simple Yes/No toggle using the code above.
• Firstly, just like all the form elements before – we start by writing a <label> with the appropriate text
• Then, we create a <select> menu containing two <option> tags – each of them representing Yes and No
• Finally, to give it that toggle look we simply add a data-role= “slider” property to the <select> menu
• You can also optionally make the toggle small by using the data-mini= “true” attribute

Buttons & Popups using jQuery Mobile

         <a
           href="#submitPopup"
           data-rel="popup"
           class="ui-btn ui-corner-all ui-shadow"
           data-transition="pop"
           >Submit</a
         >


       <div data-role="popup" id="submitPopup">
         <p>The form was submitted successfully!</p>
       </div>

The above button acts as a Submit Form button. However, as this is a demo application this button only displays a “Form Submitted Successfully” popup after being clicked.

• Firstly, we create a <div> and give it a data-role of popup.
• After this, anything inside the <div> becomes invisible by default and will only become visible when someone calls this popup
• However, to call this popup we need to provide it with an id ( for eg: submitPopup)
• Then, we create a button using the link tag <a> and inside it’s href value we provide the #id value of the popup. This makes sure that the relevant popup is shown after the button is clicked
• To add additional styling to the button we add default jQuery Mobile classes such as ui-btn
• To make the button corners rounded and to add a shadow to the buttons, we use the ui-corner-all and ui-shadow classes respectively

Part#5 – Designing the “About Us” page on the jQuery Mobile Application

Lastly, we add content to the About Us page using the code below

       <h1>About Us</h1>
       <p>
         This is a demo application built using <b>jQuery Mobile</b>. This
         shows basic features of jQuery Mobile such as Buttons, Themes, Navbar,
         Sliders, Checkboxes and a lot more !
       </p>

• In the above code, we start by declaring a <h1> tag with the title of the page – About Us
• Lastly, we add a simple paragraph tag <p> to write the description of this page
• We also make use of the bold tag <b> to highlight a few sections of the text by making them bolder

Part#6 – Theming the jQuery Mobile Web App in Dark Mode

By now, your application should look something like this

It’s time to make stuff more interesting by theming the app. By default, jQuery Mobile also provides us with a Web Tool called themeroller ( https://themeroller.jquerymobile.com/ )

In jQuery Mobile themes work in the following way

• In a single web app, there can be upto 26 themes each having a letter from A-Z
• Every single page or any <div> can have it’s own theme by using the data-theme attribute which takes a letter from A-Z

Since we only require one dark theme – we’ll be selecting the letter A and creating a dark theme on that

Using the color palette shown above, simply drag and drop the colors into the letter A to create your desired theme A

The final result for a dark theme looks like the one above. You can leave the theme letters B and C empty for now as we will only be needing the single dark theme present in the letter A

From the menu above, simply click on the download theme zip file and copy the themes folder into your project directory as shown example below

Then, we simply need to add the below lines in the beginning of the <head> tag to link these themes into the index.html file

Then, simply add data-theme= “a” attribute to the <body> tag to enable site-wide darktheme!

Bonus: Adding Plugins to jQuery Mobile App – ( jCollapsible Comments )  

This is an optional section for people who are interested in learning more about adding custom plugins in jQuery Mobile

After completing the Game Survey Web App above, we’ll be making a simple demo that will make use of the jCollapsible Plugin.

This plugin essentially converts an HTML List to a properly formatted comment thread with only a few lines of code

• Firstly, download the jCollapsible.js file using the following link
• Move the downloaded javascript file to your project folder

Let’s create a sample comment section with HTML lists using the code below

  <ul id="comments">
     <li>
       This video was really good!
       <ul>
         <li>Yes I Agree!</li>
         <li>Me too!</li>
       </ul>
     </li>
     <li>Inspiring..</li>
     <li>Could have been better</li>
   </ul>

The above code should return an output similar to the one shown below.

To make the comment section collapsible, we simply add the jQuery Collapsible plugin and use the .collapsible() method like shown below

    <script src="./jCollapsible.js"></script>
   <script>
     $("#comments").collapsible();
   </script>

The above code should make the #comments section collapsible giving the following result

Conclusion

Congratulations on coming this far and completing this journey of learning jQuery Mobile. In this tutorial we discussed a wide range of topics such as Sliders, Radio Buttons, Checkboxes, Switches, Buttons, Popus and even Pages. We also learnt a little bit about theming and adding dark themes in jQuery Mobile.

However, do not consider jQuery Mobile to be limited to what we discussed today as there is a lot more to learn from their official documentation and this tutorial was only intended to give you enough information so that you can learn the rest on your own

Another important thing to note is that jQuery Mobile is no longer supported and it has been that way for a long time since 2014-2015. However, there are still tons of mobile websites that still make use of this library. While it is good to know about it, it is definitely not recommended to start a new jQuery Mobile project especially in 2022.