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!
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.
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.
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>
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>
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.
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>
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”‘.
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>
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>
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.
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>
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.
Here is a list of page transitions that available for us to apply to any page link or form submission with Ajax navigation.
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.
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!