01 - jQuery Mobile Introduction

Introduction

With the increased number of mobile phone users, thousands of mobile apps are getting introduced daily. As creating mobile web apps are easier compared to creating native mobile apps, more and more companies and developers are now into mobile web app development. Unlike native mobile apps, mobile web apps are accessed from the browsers on the device. Moreover, mobile web apps are cross device and cross platform.

But, the main issue when developing mobile applications with HTML and CSS is that different browsers and devices treat your code differently and hence the output would be normally different. So you would have to write different sets of code for different devices to overcome this issue. That is, you would have to create different styles for different elements to make them appear in different devices the way you want. In short, you will have to concentrate more on device handling than your project implementation. Here jQuery Mobile can help you.

If you are a mobile user who accesses web sites using your mobile browser, then you might have felt that there is a huge difference in the appearance of web sites accessed from a desktop browser and those accessed from a mobile browser. jQuery Mobile helps you develop sites that are optimized for mobile devices and also to develop apps that look more like mobile apps than normal web applications.

jQuery Mobile is a popular framework that is built on the top of jQuery library. As the name indicates, it is used for creating applications for touch optimized devices. jQuery Mobile creates a code base that handles the differences between devices, that too with a support of large range of devices. It works on all popular smartphones and tablets. It uses HTML5, CSS3 and AJAX for laying out pages with minimal scripting. jQuery Mobile is a free, open source library like jQuery. Popularity of mobile web apps make jQuery Mobile also so popular.

jQuery Mobile Referencing

Being a JavaScript library, you need to reference the required files before using jQuery Mobile. You can reference it either offline or online. If your Internet connection is not that stable, you can download jQuery Mobile from the official website “http://jquerymobile.com/download/” and add reference to the required files in your .html or .js file you plan to use jQuery Mobile in.

If you visit the site, you could find a Download Builder link. It allows you to customize your download, i.e. you will have the option to select only the components you need and download them instead of going for a complete download. If you want to download all the components, you could find links to different versions of jQuery Mobile on the download page just below the Download Builder section. Download the version you want to get a zip file on your computer. It is always better to download the latest stable version as it will have more stable and advanced features.

Once the download is complete, unzip the file and you could find a couple of folders including demos and images and a number of files with .css and .js extensions. The files you need to include are jquery.mobile-1.4.5.css and jquery.mobile-1.4.5.js or jquery.mobile-1.4.5.min.css and jquery.mobile-1.4.5.min.js. The first set of files (jquery.mobile-1.4.5.css and jquery.mobile-1.4.5.js) are specially meant for development environment and the second set of files (jquery.mobile-1.4.5.min.css and jquery.mobile-1.4.5.min.js) are for production environment. You can reference files for either development environment or production environment in your .html file. You also need to add reference to latest jQuery file. Make sure that you add references to the three files (one jQuery file and two jQuery Mobile files) correctly. You can put all these three files and your .html file in the same folder so that referencing becomes easier.

If your Internet connection is stable and fast enough, then instead of downloading jQuery Mobile files and referencing them in your .html file, you can reference them online. You can copy and paste the snippet for jQuery CDN hosted files from the download page of jQuery Mobile at http://jquerymobile.com/download/ within the <head> tags. 

Sample Code

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
   <title>Sample Code</title>
   <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>
  </head>
  <body>
    <ul data-role="listview" data-inset="true" data-filter="true">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">jQuery</a></li>
    </ul>
   </body>
</html>

Copy these lines of code in file and save it as .html file. When you open it using your browser, you will get a screen like this:


        

If you decrease the size of your browser, you could find that the size of the items in the list changes accordingly. Thus, even if you access this site in different devices with different screen resolution, you do not have to worry. The size of the items will be adjusted automatically to best match the device.

We will see how jQuery Mobile works in the coming chapters in detail. This is just to give you a feel of how jQuery Mobile code looks like.

Summary

In this tutorial, we have seen what jQuery Mobile is and how useful it is in designing mobile optimized websites. To code using jQuery Mobile, of course you need to have the basic knowledge of HTML, CSS, JavaScript and also jQuery. 

Like us on Facebook

Wideskills