02 - jQuery Mobile - Data Roles and Themes

Introduction

The jQuery Mobile offers a really cool way to style elements the way you want with data-attributes. There are a number of data- attributes and some of them are data-icon, data-inline, data-corners, data-role and data-theme. All these attributes are completely optional. You can use the data-role attribute to assign roles to your HTML elements and data-theme attribute to set different styles to your HTML elements so easily.

The data-role Attribute

The data-role attribute is used to assign roles to your HTML elements and hence control the behavior of the elements. To make it clear, if you are adding a normal button with button tag or input tag with type equals to button, then you do not have to add the data-role attribute because the standard behavior of these elements is that of a button. On the other hand, if you want to make a <div> element or an <a> element acts like a button, then you need to add the data-role attribute like this:

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

By adding the data-role attribute, it is ensured that the same HTML element behaves in the same way on different devices. In other words, you can style every control you have in the same way by writing very less code.

The values you can set to data-role attribute are button, collapsible, collapsibleset, controlgroup, dialog, fieldcontain, slider, listview, navbar, page, header and footer.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
    <section id="homePage" data-role="page">
      <header data-role="header">
       <h1>Welcome</h1>
      </header>
      <div class="content" data-role="content">
        <p>Homepage</p>
        <a href="#" data-role="button">My Button</a>
      </div>
      <footer data-role="footer">
        <h1>Copyright</h1>
      </footer>
    </section>
  </body>
</html> 

If you save this file as a .html file and open it using your browser, you will get a screen like this:

               

You could find that the page has a header and footer and also a button. We used the data-role attribute to assign roles to the HTML elements.

The data-theme Attribute

The data-theme attribute is used to apply different themes to HTML elements so easily. Each theme varies in terms of color, padding, dimensions, rounded corners, text shadow and gradients, hence offering a wide range of visual effects. The default theme of jQuery Mobile includes 5 different themes that are given letters, a, b, c, d and e. As per the convention, swatch a is black colored, b is blue, c is gray d is gray and white and e is yellow.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  </head>
  <body>
    <div data-role="header" data-theme="a">
      <h1>Welcome!!!</h1>
    </div>
    <div data-role="content" data-theme="c">
      <p>This is a sample page!</p>
    </div>
    <a href="#" data-role="button" data-theme="b">My Button</a>
    <div data-role="footer" data-theme="e">
        <h3>Copyright</h3>
    </div>
  </body>
</html>

If you save this file as a .html file and open it using your browser, you will get a screen like this:

        

You could find that different styles are applied to the elements by just setting the value of data-theme attribute to different values such as a, b, c, d and e.

Summary

In this tutorial, we have seen the two cool attributes, data-role and data-theme, to understand how they can be used to assign different roles to different HTML elements and also to style them so easily.

 

Like us on Facebook