1. Home
  2. jQuery Mobile themes

jQuery Mobile themes

jQuery Mobile provides two different theme styles, from "a" to "b" - each themed buttons, toolbars, etc. content block colors are inconsistent, the visual effect is not the same for each topic.

By setting the element data-theme attribute can customize the appearance of the application: 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

value description Examples
a Page black text on a gray background head and bottom are black text on a gray background background black button gray text activation buttons and links to white text on a blue background
input input box placeholder attribute value is a light gray, value is black 		try it
b Page black background with white text at the bottom of the head are white text on a black background a white text button activated charcoal background buttons and links to white text on a blue background
input input box placeholder attribute value is a light gray, value is white 		try it

Button Style Use class = "ui-btn", using "ui-btn-a | b" class settings button is grayed out (default) or black: 

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

lamp "A" style theme for most of the elements, sub-elements generally inherit the style of the parent element.

Topic tops and bottoms

Examples

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

The bottom of the dialog box theme head

Examples

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b"></div>
  <div data-role="footer" data-theme="b"></div>
</div>

Topics button

Examples

<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

Theme icons

Examples

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

Topic pop

Examples

<div data-role="popup" id="myPopup" data-theme="b">

Themes button head and bottom

Examples

<Div data-role = "header">
<a href="#" class="ui-btn ui-btn-b"> Home </a>
<H1> Welcome to my home page </ h1>
<a href="#" class="ui-btn"> search </a>
</ Div>

<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Follow me on Facebook </a>
<a href="#" class="ui-btn"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Follow me on Instagram </a>
</ Div>

Topic Navigation Bar

Examples

<div data-role="footer" data-theme="b">
  <h1>文本头部</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">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>

Theme panel

Examples

<div data-role="panel" id="myPanel" data-theme="b">

Topic collapsible buttons and content

Examples

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

Topic List

Examples

<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

Topic split button

Examples

<ul data-role="listview" data-split-theme="b">

Topic Collapsible List

Examples

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Themes Form

Examples

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<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>

Topic collapsible form

Examples

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

Add a new topic

jQuery Mobile can add new topics in the mobile page.

By modifying the CSS file to add or edit a new theme (if you have downloaded the jQuery Mobile). You only need to copy the style module, and then re-letter command class name (cz), and add your favorite color and font style.

You can also add HTML document relating to the new style, the toolbar add class: ui-bar- (az), add text content categories: ui-body- (az), add page categories: ui-page-theme- ( az).

Examples

<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>


Note In previous versions of jQuery Mobile, an element using JavaScript to inherit parent theme styles. To the 1.4 version, more focused framework for performance improvement, is no longer used JavaScript to inherit, but using pure CSS.

jQuery Mobile team for this have created a tool to address the ThemeRoller . You can use this tool to upgrade an old theme, making it compatible with the new version.

Hot Tutorials

Contact US