With the increase in the number of new browsers and platforms, addressing the need of mobile users is becoming challenging for us. However, thanks to jQuery Mobile we can create mobile apps that work perfectly well on new platforms and different device screen. What’s more? jQuery Mobile also helps to add enhanced elements to the app such as touch-friendly UI widgets, Ajax-powered navigation system, etc. This tutorial will make you learn the process of building a simple mobile application using jQuery Mobile.
In order to create a jQuery Mobile app, you’ll first have to become familiar with some of the basic controls that are available within the framework.
Create a Basic Page Template
A page is the main component of jQuery Mobile, and is segregated in three different parts such as: header, content, and footer. While the header and footer parts are optional, creating a content region is mandatory. In order to begin page template creation, open any text editor and add the below template code in it:
<title>My First jQuery Page</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://yourdomain.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css”>
<h1>My Page Title</h1>
</div><!– /header –>
</div><!– /content –>
</div><!– /footer –>
</div><!– /page –>
Let’s see how the above code works:
The template <head> contains a meta viewport tag that helps assign screen width to the device pixel width. And then, references to the mobile theme CSS (i.e. stylesheet), jQuery, and jQuery Mobile helps in adding styles and scripts.
In the <body> section, a div container with a data-role of the page is defined to describe the page precisely. In addition, three more data-role attributes containing the page header, the content region, and footer are added within the <body> tag for creating a basic page template. However, you can skip all the three attributes as they’re optional. Remember that the “data-” attributes are HTML5 attributes that need to be used throughout jQuery Mobile. That’s because, they help in transforming your basic markup into an interactive, improved and styled widget.
Add Content to Your Page Template
So, now that you’ve created a basic page template, it’s time to add some content in it. You’ll need to add content in the content container. The content can include standard HTML elements such as headings, paragraphs, etc. What’s more? You can even choose to write custom styles for creating custom layouts. For doing so, however, you’ll need to add an additional stylesheet to the <head> of the template following the jQuery Mobile stylesheet.
Choose a Theme Swatch
The theme framework in jQuery Mobile contains several color “swatches”. Every part in the jQuery Mobile theme — including the page, content, and other parts — contains its own swatch color. And so, a default theme or a customized one will contain diverse color swatches, which can be defined using the attribute “data-theme”. In fact, you can define a swatch color with a letter in between a-z. But, not all the themes will contain so many different color swatches, so the default attribute to define the color swatch is written as: data-attribute:”e”.
Working With jQuery Mobile Components
jQuery Mobile comes with a rich set of components that helps to enhance your application. Let’s have a look at some of the most important components:
You’ll most likely be familiar with a list view is, in jQuery Mobile, a list view is nothing more than a list of ordered/unordered items that are displayed on a page. You can add a different set of common listviews in jQuery Mobile defined as data-role=”listview”. These lists are optimized to be used with touch screen displays.
Let’s see an example of listview:
<ul data-role=”listview” data-inset=”true” data-filter=”true”>
2. Form Elements
The jQuery Mobile provide support for both generic and new web form controls. The framework boats a feature known as “auto-initialization” that helps turn a standard web form touch-friendly styled widgets. Let’s have a look at the list of the items that can be rendered as rich controls:
• Text Inputs
• Check boxes and more
Below is an example of how a slider can be created using HTML5 new input type=”range”, without using data-role:
<label for=”slider-0″>Input slider:</label>
<input type=”range” name=”slider” id=”slider-0″ value=”25″ min=”0″ max=”100″ />
Apart from links, you can also make buttons. One best way to do so requires converting a link into a button. That’s because, this makes the link easy to click. For this purpose, you need first to create a link, and then simply add the attribute data-role=”button” to the link. Additionally, you can even choose to add an icon using the data-icon attribute, as shown below:
<a href=”#” data-role=”button” data-icon=”star”>Star button</a>
Remember, jQuery Mobile isn’t a jQuery alternative and is rather a UI (user interface) framework. It helps to render web experiences with a mobile device (especially the ones with touch-interface). It makes use of HTML5 code and is a multi-platform framework.
Although, there’s a lot more to jQuery Mobile, however, hope that this tutorial will provide you better understanding of the basics of working with jQuery Mobile. You’ll learn how you can create a basic page structure of jQuery Mobile app including some elements for enhancement.
Author Bio: Juana Steves is an application developer for Xicom Technologies, which is the leading iPhone Application Development Service. She loves sharing the latest information on mobile technology and provides concrete information on technologies like iOS, Android mobile apps development.