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.
"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">
We will see a simple illustration where we use jQuery Mobile to theme a header and a footer. The example is also downloadable.
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-roleallows jQuery to give specific styling to the<div>.