jQuery Mobile App Development – A Handy Guide For Beginners

By | April 27, 2015

With the continuous development of new browsers as well as platforms, fulfilling the rapidly increasing need of mobile users is becoming a difficult task. Thankfully, because of invention of cross-platform mobile application development frameworks such jQuery Mobile, we are building apps that run across all major devices has become a hassle-free process. That’s not it, you can even add several enhanced components to your app with the help of jQuery Mobile framework, which includes touch-optimized UI widgets, Ajax navigation system, and much more.

jQuery Mobile App Development

So, if you’re interested in creating an application via jQuery Mobile, but aren’t aware of the creation process, then continue reading the post further.

Creating a Standard Page Template

jQuery Mobile Page Template

In order to make your app working, you’ll first need to set a basic page template. The template contains jQuery code that is needed to begin with mobile app creation. Look at the below example:jQuery Mobile Code

Let us now understand how the above provided code works. The <head> element of your template contains a viewport meta tag, which helps to set the screen width of the page to be same like your mobile device screen.

Furthermore, the template makes use of HTML5’s data attributes, as it appends “div-” prior to several divs within a one single HTML file, which creates more than one page. For instance, we’ve defined data-role=”page” containing three different data-role attributes such as page header, content region and footer. These attributes are added in the <body> tag to create a standard page template. You can, however, avoid using those attributes since they’re optional. If you’re still facing issues understanding how to create a basic page template, it is advisable that you should opt for a Java software development company having good experience in creating apps using jQuery Mobile.

Adding Content to the Newly Created Page Template

Adding jQuery Content

Once you’ve completed creating a basic page template for your mobile app, keep in mind that it won’t display anything as it doesn’t contain any content. So, your next step should be to place some content within your template that will be added to the content container. You can choose to add several basic HTML elements in your content like paragraphs, lists and more. Besides this, you can write a few custom styles to build custom layouts of your choice, which requires you to embed additional stylesheet to your template’s <head> section.

Selecting Your Choice Of Theme Swatch

jQuery Theme SwatchThe jQuery Mobile theme framework comes prepackaged with many different color “swatches”. In fact, each individual part of a jQuery Mobile theme such as page, content, and others have their own swatch color. Therefore, whether you’re choosing a pre-built jQuery Mobile theme for your app or a customized one, both will include multiple color swatches.

You can define a swatch color for the customized theme with the help of “data-theme” attribute or using any letter in between a-z.

Note: Remember that all of the jQuery Mobile themes cannot have many different color swatches. If that’s the case, then you can use the default attribute for defining the color swatch using data-attribute:”e”.

Creating a Listview

jQuery Mobile ListViewComponents of an app are often displayed using list view. The same is the case with an jQuery Mobile, which contains several listviews (coded as lists), you can implement in your app using data-role=”listview”. The best part is that the lists are touch-friendly. Let’s look at a simple example of making a listview:jQuery Mobile Code Snippet

Making Buttons

Buttons for jQuery MobileOther than creating listviews, you can even make buttons to be added in your app. The button helps in making the links easily clickable. Remember, prior to creating a button, you’ll first have to create a link, and later just add the data-role=”button” attribute to the link. In addition, you can also add an icon for the button using the “data-icon” attribute.

<a href=”#” data-role=”button” data-icon=”star”>Star button</a>


If you want to create a cross-platform app having touch-optimized components in an easy manner, then jQuery Mobile is a viable alternative for you. Though, there are lots of things, you can do using a jQuery Mobile framework, but hope that reading this post will give you a basic understanding of creating an app with jQuery Mobile.

Author Bio

Juana Steves is a web developer by profession for Xicom Technologies, which is the leading software development company. She is an expert in developing web applications and writes articles for sharing her experiences in Research and development vertex related to varied web development technologies.

Top 10 Interview Questions and Answers Series:

Are you looking for a Web & Mobile Development Jobs in Gulf Region? Please follow below: