❮ Jquerymobile Install Jquerymobile Collapsibles ❯

jQuery Mobile Themes

jQuery Mobile offers 2 different theme styles, ranging from "a" to "b" - each theme has different colors for buttons, toolbars, content blocks, etc., and each theme has a unique visual effect.

You can customize the appearance of your application by setting the data-theme attribute on elements:

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

Value	Description	Example
a	Page with gray background and black text <br>Header and footer with gray background and black text <br>Button with gray background and black text <br>Active button and link with white text and blue background <br>Placeholder value in input fields is light gray, value is black	Try it
b	Page with black background and white text <br>Header and footer with black background and white text <br>Button with white text and charcoal background <br>Active button and link with white text and blue background <br>Placeholder value in input fields is light gray, value is white	Try it

Button styles use class="ui-btn", and use the "ui-btn-a|b" class to set the button to gray (default) or black:

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

| | The "a" theme style is used for most elements, and child elements typically inherit the style of their parent. | | --- | --- |

Theme Headers and Footers

Example

Theme Dialog Headers and Footers

Example

Theme Buttons

Example

Theme Icons

Example

Theme Popups

Example

Theme Buttons in Headers and Footers

Example

<div data-role="header">  &lt;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>

Theme Navigation Bars

Example

Theme Panels

Example

Theme Collapsible Buttons and Content

Example

Theme Lists

Example

Theme Split Buttons

Example

Theme Collapsible Lists

Example

Theme Forms

Example

Theme Collapsible Forms

Example

Adding New Themes

jQuery Mobile allows you to add new themes to mobile pages.

By modifying the CSS file, you can add or edit new themes (if you have downloaded jQuery Mobile). You just need to copy the style modules, rename the letter class (c-z), and add your preferred colors and fonts in the styles.

You can also add new theme styles in the HTML document, add classes to toolbars: ui-bar-(a-z), add classes to text content: ui-body-(a-z), and add classes to pages: ui-page-theme-(a-z).

Example

| | In previous versions of jQuery Mobile, JavaScript was used to inherit parent theme styles for elements. Starting from version 1.4, the framework focuses more on performance improvements and no longer uses JavaScript for inheritance, but rather pure CSS. <br> <br>The jQuery Mobile team has created a tool for this, available at ThemeRoller | | --- | --- |

❮ Jquerymobile Install Jquerymobile Collapsibles ❯