jQuery Mobile theme
May 21, 2021 jQuery Mobile
Table of contents
3. Theme head, content and bottom
8.. The theme buttons for the head and bottom
12.. Theme collapsible buttons and content
18.. The list of topics can be collapsed
jQuery Mobile theme
jQuery Mobile theme
jQuery Mobile offers 5 different theme styles, from "a" to "e" - buttons, toolbars, content blocks, and more for each theme in different colors, and different visual effects for each theme.
You can customize the appearance of your app by setting the data-theme property of an element:
| value | describe | Example |
|---|---|---|
| a | default.White text on black background | try it |
| b | Blue background white text / black text gray background | try it |
| c | Black text light gray background | try it |
| d | Black for white background | try it |
| e | Black writing orange background | try it |
|
You like mixed themes!
By default, jQuery Mobile uses the "a" theme (black) to set the head and bottom, and the "c" theme (light gray) to set the page content. However, you can customize the settings for your favorite blend of themes. |
|---|
Theme head, content and bottom
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>
Try it out . . .
The theme dialog box
<div data-role="page" id="pagetwo" data-overlay-theme="e">
<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="c"></div>
</div>
Try it out . . .
The theme button
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>
Try it out . . .
Tip: A standard set of jQuery Mobile icons is included in jQuery Mobile that can be assigned to buttons.
The theme icon
The theme buttons for the head and bottom
<a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" data-role="button" data-icon="search" data-theme="e">Search</a>
</div>
<div data-role="footer">
<a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a>
<a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a>
<a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a>
</div>
Try it out . . .
The theme navigation bar
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="b">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li>
</ul>
</div>
</div>
Try it out . . .
Theme collapsible buttons and content
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Try it out . . .
The list of topics
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li data-theme="b"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
Try it out . . .
The theme split button
The list of topics can be collapsed
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Try it out . . .
The subject form
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Try it out . . .
The theme collapses the form
<legend>Click me - I'm collapsible!</legend>
Try it out . . .
Add a new theme
jQuery Mobile can add new themes to the mobile page.
Add or edit a new theme by modifying the CSS file if you've already downloaded jQuery Mobile. All you need to do is copy the style module, then re-command the letter class name (f-z) and add your favorite colors and fonts to the style.
You can also add a new style for the theme in an HTML document - toolbar add class: ui-bar-(a-z), text add class: ui-body-(a-z) for content:
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
Try it out . . .
Well, now use the jQuery Mobile theme to beautify your interface with the exercises in this chapter!