Home » Tutorials » JavaScript » JQuery Mobile for Absolute Beginners – Part 2

JQuery Mobile for Absolute Beginners – Part 2

JQuery Mobile for Absolute Beginners – Part 2

  • Stumble it!
  • Share

Hi guys! Welcome to the second part of jQuery Mobile for Absolute Beginners. In this lesson, we will discuss on how the HTML5 data-* attributes that jQuery Mobile relies on to support various UI elements, transitions, and page structure. If you haven’t already, be sure to read the previous articles of this series first!

Introduction to HTML5 data-* attributes

The data-* attribute is a HTML5 elements that allow you to define and store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler. If you like to know more about the HTML5 data-* attributes, please read our previous article, to find out more. The jQuery Mobile uses the data-* attribute to transform basic markup into an enhanced and styled widget. Example, you are required to define the “data-role” for the header, body content and footer, when you are working with jQuery Mobile.

To learn more about HTML5 data-* attributes, please visit our previous article – A Complete Guide Of Using HTML5 Data Attributes (Data Set)

Supported data-* Syntax For jQuery Mobile.
Here is the supported list of data-* syntax that you should know when you are trying to transform your HTML markup into styled widget.

Header, Body Content & Footer

If you want to create header, body content & footer for your mobile website or application, then you should write your HTML markup as shown like below:

<div data-role="header">
<div data-role="content">
<div data-role="footer">

As you can seen above, “data-role” attribute has been used to inform jQuery Mobile to assign the specific role to the specified div.

Button

Let say, we want to create a click-able button, then we should assign “button” as a value for “data-role” attribute.

<a href="#" data-role="button">Button</a>

Output:

jQuery Mobile Button

The markup above will turn the link element into a button so it’s easy to click. Besides that, you can add an icon with the “data-icon” attribute and set its position with the “data-iconpos” attribute. Example:

<a href="#" data-role="button" data-icon="check" data-iconpos="right">Button With Icon</a>

Output

Button With Icon

The framework has provided ample of icons for us to use it in our projects, you can click here to see the complete list of available icons for button.

Grouped Buttons

Sometimes, we may want to visually group a set of buttons together to form a single block that looks like a navigation component. With jQuery Mobile framework, we can easily get the effect by writing our code in this way:

<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Confirm Later</a>
</div>

Output

Grouped Buttons

Just wrap all the buttons in a div container with ‘data-role=”controlgroup”‘ attribute. The “controlgroup” will tell the framework to remove all margin and drop shadow between the buttons and grouped them all together.

By default, the grouped buttons presented as a vertical list, but the framework do also allow us to arrange the grouped buttons horizontally by adding the ‘data-type=”horizontal”‘.

Output

Horizontal Grouped Buttons

List Views

A list views is an unordered list that contains click-able list of items with a ‘data-role=”listview”‘ attribute. By declaring a <ul> with ‘data-role=”listview”‘, the framework will apply all necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. Example of a simple list view:

<ul data-role="listview">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Output

List Views

Usually, web designers will add thumbnails or icons to the left of a list item. By adding thumbnails into the list views, the jQuery Mobile framework will scale the image to 80 pixels square.

<ul data-role="listview">
    <li><a href="index.html"><img src="http://www.onlywebpro.com/wp-content/uploads/2010/10/thumb_post05.jpg" />Home</a></li>
    <li><a href="about.html"><img src="http://www.onlywebpro.com/wp-content/uploads/2010/11/thumb_post17.jpg" />About</a></li>
    <li><a href="contact.html"><img src="http://www.onlywebpro.com/wp-content/uploads/2011/10/introduction-to-device-orientation-with-html5.jpg"/>Contact</a></li>
</ul>

Output

List Views With Thumbnails

For the icons, if you want to add a standard size 16 x 16px of icon into the list item, then you could specify it by adding “ui-li-icon” to the image element.

Dialogs

We can present a page into a modal dialog by adding ‘data-rel=”dialog”‘ to the click-able link. Usually diaogs is used for confirmation of a decision, such as money transaction. Example:

<a href="confirm.html" data-role="button" data-rel="dialog">Open dialog</a>

Output

Dialogs

By default, the dialog will open by a “pop” transition, but the framework do allow us to specify any page transition using “data-transition” attribute.

Page Transitions

Here is a list of page transitions that available for us to apply to any page link or form submission with Ajax navigation.

  • fade
  • pop
  • flip
  • turn
  • flow
  • slidefade
  • slide
  • slideup
  • slidedown
  • none

Example of usage, open a dialog with “flip” page transition:

<a href="confirm.html" data-role="button" data-rel="dialog" data-transition="flip">Open dialog</a>

You can view the set of demos on supported browser such as latest Chrome and Firefox.

View Page Transition Demo

Conclusion

You have just learned to apply HTML5 data-* attributes to the HTML elements to transform them into fingers friendly elements. And you also learned that how the jQuery Mobile relies on the data-* attributes to support various UI elements, transitions, and page structure.

In the next coming tutorial, we will discuss more on the form elements that used in jQuery Mobile. Please follow us on either Facebook, Twitter, Google+, Stumble Upon or LinkedIn for upcoming updates!


  • Enhancing Google Map Interactivity with jQuery
  • Replacing jQuery Animation With CSS Hardware Accelerated
  • How To Create jQuery Password Strength Indicator in 10 Minutes!

Android, iOS Development Tutorials