WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Themes


jQuery Mobile Themes

jQuery Mobile gives two distinctive style topics, "a" and "b" - each with distinctive hues for catches, bars, content squares, thus on.

To tweak the appearance of your application, utilize the information topic property, and allocate the characteristic with a letter:

<div information role="page" data-theme="a|b">

Value Description Example
a Black message on a light dark foundation for page content
Black message on a dim foundation for headers and footers
Black message on a light dark foundation for buttons
White message on a blue foundation for dynamic buttons
Blue message on links
Light dark content (placeholder) or dark content (esteem) on a white foundation for information fields
Try it
b White message on a dull dark foundation for page content
White message on a dim dark foundation for headers and footers
White message on a charcoal foundation for buttons
White message on a "cyan" blue foundation for dynamic buttons
"Cyan" blue content on links
Gray content (placeholder) or white content (esteem) on a dark foundation for info fields
Try it

For catches with class="ui-btn", utilize the "ui-btn-a|b" class to style the catch either dark (default) or black:

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


Theming Header and Footer

Example

<div information role="header" information theme="b"></div>
<div information role="footer" information theme="b"></div>
Try it yourself »

Theming Header and Footer in Dialogs

Example

<div information role="page" information dialog="true" id="pagetwo">
  <div information role="header" information theme="b"></div>
  <div information role="footer" information theme="b"></div>
</div>
Try it yourself »

Theming Buttons

Example

<a href="#" class="ui-btn ui-btn-b">Black Button</a>
Try it yourself »

Theming Icons

Example

<a href="#" class="ui-btn ui-btn-b ui-symbol look ui-btn-symbol notext">Search</a>
Try it yourself »

Theming Popups

Example

<div information role="popup" id="myPopup" information theme="b">
Try it yourself »

Theming Buttons in Header and Footer

Example

<div information role="header">
  <a href="#" class="ui-btn ui-btn-b">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn">Search/a>
</div>

<div information role="footer">
  <a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
  <a href="#" class="ui-btn">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Try it yourself »

Theming Navigation Bars

Example

<div information role="footer" information theme="b">
  <h1>Insert Footer Text Here</h1>
  <div information role="navbar">
    <ul>
      <li><a href="#" information icon="home" information theme="a">Button 1</a></li>
      <li><a href="#" information icon="arrow-r">Button 2</a></li>
      <li><a href="#" information icon="arrow-r">Button 3</a></li>
      <li><a href="#" information icon="search" information theme="a">Button 4</a></li>
    </ul>
  </div>
</div>
Try it yourself »

Theming Panels

Example

<div information role="panel" id="myPanel" information theme="b">
Try it yourself »

Theming Collapsible Button and Content

Example

<div information role="collapsible" information theme="b" information content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the extended content.</p>
</div>
Try it yourself »

Theming Lists

Example

<ul information role="listview" information theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li information theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>
Try it yourself »

Theming Split Buttons

Example

<ul information role="listview" information split-theme="b">
Try it yourself »

Theming Collapsible Lists

Example

<div information role="collapsible" information theme="b" information content-theme="b">
  <ul information role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>
Try it yourself »

Theming Forms

Example

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

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" information theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Try it yourself »

Theming Collapsible Forms

Example

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