What are jQuery Mobile themes?

Introduction

The jQuery Mobile theme comes with its own CSS styling that gives your mobile design a uniform and consistent, user-friendly interface. That is to say, you can build a complete theme for mobile platforms with only a jQuery mobile theme.

Creating a theme for the content section

"a" and "b" are two separate style themes provided by jQuery Mobile, each with different colors for buttons, bars, content blocks, and other elements.

Use the data-theme property and assign it a letter to personalize the appearance of your application:

<div data-role="page" data-theme="a">

Example

We will see a simple illustration where we use jQuery Mobile to theme a header and a footer. The example is also downloadable.

Code explanation

• In line 5, we add the jQuery library using the cdn link.

• In line 11, we use a <div with data-role = "page" to wrap the whole page content.

• In line 12, we use a <div with data-role = "header" and data-theme= "b" to wrap the whole header content.

• In line 16, we use a <div with data-role = "main" to wrap the content area and a class="ui-content" for specific styling.

• In line 22, we use a <div with data-role = "footer" and data-theme= "b" to wrap the whole footer content.

Note the attribute data-role allows jQuery to give specific styling to the <div>.