Latest web development tutorials

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>

try it"

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>

try it"

Topics button

Examples

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

try it"

Theme icons

Examples

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

try it"

Topic pop

Examples

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

try it"

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>

try it"

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>

try it"

Theme panel

Examples

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

try it"

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>

try it"

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>

try it"

Topic split button

Examples

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

try it"

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>

try it"

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>

try it"

Topic collapsible form

Examples

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

try it"

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>

try it"

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.