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-role
allows jQuery to give specific styling to the<div>.