jQuery Mobile framework – Beginner Tutorial

Being able to reach your audience via a mobile page is becoming almost as important as having a page at all but getting started in mobile site development can be frustrating. The jQuery library provides many handy mobile features that you can use to get started making great mobile-friendly web sites. In this article I will discuss the jQuery mobile framework features and give you a little demo on how it works.

What is jQuery Mobile?

jQuery Mobile is a unified framework that is designed to work on all major mobile platforms. This allows us to save a lot of time in development since we no longer have to think about different platform problems or write separate pages for different devices. The framework was designed around the touch-screen concept and has many built-in tools to help you design touch-friendly interfaces. You can create themes for your site that are designed around various form-factors of the screen so your page will look just as great on a phone as it does on a tablet. This is an excellent breakthrough for developers that need to work in the mobile phone or tablet setting and ultimately saves a lot of time and frustration.

How to Get Started

Getting started writing jQuery Mobile applications is not really that different from writing jQuery for a traditional site. You can get a basic page template from the jQuery Mobile Quick Start Guide that can serve as a starting template for your page. Here is an example of the template page:

<!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->
    <div data-role="content">
        <p>Hello world</p>     
    </div><!-- /content -->
</div><!-- /page -->
</body>
</html>

This template already contains the elements needed to serve your page for the particular screen width. There are several wrappers set up in the template that delineate between header and content sections. Although these wrappers are optional, they are nice to have and make creating the different areas of your page easier. These new data- attributes are part of HTML5 and transform the markup in the wrapper to a styled widget when rendered.

Once you have this basic template downloaded, you can begin editing to add the usual HTML elements you may need inside the content container. If you want to add custom layouts or addition styles you can add another stylesheet to the head section after the jQuery Mobile stylesheet. There are also many new jQuery Mobile controls that you can add to your page that will render nicely in your mobile environment. These controls include items such as buttons, sliders, lists, text areas, menus and switches. Here are some examples:

To create a text input field:

<input type="text" name="name" id="basic" value=""  />

This creates a basic text box that is 100% of the parent container. You can specify a particular width if needed as well as use the data-role attribute to group the text box with other form elements, like so:

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

When linking between pages using jQuery Mobile, you create the links between pages like you normally would with HTML, except the framework will automatically handle the page request using Ajax when possible. This creates a seamless page transition and a quicker response time for mobile devices that may be on limited bandwidth. If Ajax isn’t possible, such as an external-domain URL or if the request to the page fails, a normal HTTP request for the page will be issued. There are also some special features that go along with links such as forcing a page refresh, setting up “back” buttons, creating email links that launch the mail client using the mailto: protocol and telephone links that initiate a call using the tel: protocol. Here are some examples:

A regular internal link:

<a href="../index.html">Link in the same domain</a>

Forcing the page to refresh and prohibit AJAX:

<a href="index.html" data-ajax="false">Link with refresh the page</a>

A link to send an email

<a href="mailto:me@foo.com">Basic email link</a>

Phone link:

<a href="tel:5555555555">Call me!</a>

When setting up your links you can also think about page transitions. The jQuery Mobile framework provides six CSS-based transitions that can be used on your site to create a more professional and polished result. Setting up these transitions is easy since it only requires adding the data-transition attribute to your links:

This link will use the slide transition:

<a href="../index.html" data-transition="slide">Link in the same domain</a>

This link will use the pop transition:

<a href="../index.html" data-transition="pop">Link in the same domain</a>

It’s that simple! You would now have a custom-looking transition between your pages that only took a second to add.

There are many more features, controls, documentation and examples at the jQuery Mobile home page at:

http://www.jquerymobile.com

You can also see examples of mobile sites that have been created using the framework if you need some inspiration. There are so many great reasons to use the jQuery Mobile framework and it is so easy to learn that you should get started today!

Posted by: Dhiraj kumar

Advertisements

11 thoughts on “jQuery Mobile framework – Beginner Tutorial

  1. Your site is not compatible for IE7

    below texts are not shown in said browser

    “Latest Techonology Updates in Web Technology By Creative Head, Dhiraj”
    “Stay updated via RSS”
    “Leave a Reply ”
    “Fill in your details below or click an icon to log in:”
    “text in input box”

  2. Your site is not compatible for IE7

    Below texts are not shown in said browser

    “Leave a Reply ”
    “text below textarea”
    “Latest Techonology Updates in Web Technology By Creative Head, Dhiraj”
    “Stay updated via RSS”

    • Seeing as IE7 has less than 10% of the browser market share, I am not going to test or develop this site compatible for IE7 or below this version. Gmail, Facebook, Drupal, Youtube and most of the popular sites have already stopped support for IE7. Here I am sharing about latest technologies. I am not discussing the previous, outdated or historical methods. I respect a old techniques but I can’t suggest anyone to follow a outdated method. Currently we are going on mars and you are talking about repair a bull-cart.

      • Sorry if i mistaken, you are right, people who are about to discuss new technologies (web designers, developers etc) don’t use ie7 or ie8 below browsers, most of use chrome, Firefox etc……. But if someone is going to enormous place or town where they cant have those browsers or modern browsers are not available, and they want to read or comment to the post and they cant. At least they must see text or indications in site, some texts of ur page cant be seen, i am not talking about design or styling, talking about functionality, dats it.

      • Excellent choice of words to represent technology leaps and bounds. I have also stopped supporting the browser. I am thinking about just IE9. Folks either need to be more responsive to the technology requirement and upgrade or step .

  3. I am really impressed with your writing skills and also with the format to your blog. Is this a paid topic or did you modify it yourself? Anyway stay up the nice high quality writing, it’s rare to look a nice weblog like this one today..

  4. I like the helpful info you provide in your articles. I will
    bookmark your weblog and check again here regularly. I am
    quite sure I’ll learn lots of new stuff right here! Good luck for the next!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s