What are Mobile Application Theming in jQuery With Example

Mobile Application Theming

With jQuery Mobile’s powerful theming system and swatches, you can construct beautiful, lightweight, and versatile mobile apps. The HTML5 based jQuery Mobile user interface framework is for mobile webpages and apps. Touch-friendly UI widgets and AJAX navigation are included. The theming system was developed with mobile application theming in mind, utilising CSS 3’s broad capabilities to create contemporary visual components like gradients, drop shadows, and rounded corners.

jQuery Mobile’s Theming System and Swatches

Colour and texture are treated differently in jQuery Mobile’s theming system than padding and dimension. Because developers can change the visual look (colours, textures) without disrupting the structural layout, this distinction enables for many mix-and-match visual designs.

Theme refers to a consistent visual style utilised throughout the interface, including colours, drop shadows, and typefaces. Theme ideas include swatches. A single swatch controls text, symbol, backdrop, and shadow colours.

There are five swatches in the default jQuery Mobile theme: ‘a’, ‘b’, ‘c’, ‘d’, and ‘e’ White letters on a black background highlight ‘a’ and soften ‘d’. Swatches have different visual focus. Error notices frequently use swatch ‘e’. In most situations, jQuery Mobile defaults to using swatch ‘c’.

Utilizing Swatches

It is simple to use the data-theme attribute to apply a distinct swatch to elements. This attribute affects descendants of any jQuery Mobile-enhanced element. Theme swatches are applied to all page elements unless a data-theme parameter overrides them.

By creating sections with different data-theme properties, you can create numerous application pages with unique swatches. Here’s an example of how jQuery Mobile automatically applies the designated colour concepts to elements such as buttons, list views, headers, content regions, and footers.

Code example:

A code example showing how to apply various colours to different parts of a mobile application can be found here:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Swatch Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
    <!-- Page with Swatch A -->
    <section id="page-swatch-a" data-role="page" data-theme="a">
        <header data-role="header"><h1>Page with Swatch A</h1></header>
        <div data-role="content">
            <p>This content uses the 'a' swatch.</p>
            <a href="#page-swatch-b" data-role="button">Go to Swatch B Page</a>
        </div>
        <footer data-role="footer"><h1>Footer A</h1></footer>
    </section>
    <!-- Page with Swatch B -->
    <section id="page-swatch-b" data-role="page" data-theme="b">
        <header data-role="header"><h1>Page with Swatch B</h1></header>
        <div data-role="content">
            <p>This content uses the 'b' swatch.</p>
            <a href="#page-swatch-a" data-role="button">Go to Swatch A Page</a>
        </div>
        <footer data-role="footer"><h1>Footer B</h1></footer>
    </section>
</body>
</html>

Output:

Page with Swatch A
This content uses the 'a' swatch.
Go to Swatch B Page
Footer A

Page-swatch-a and page-swatch-b are the two defined pages in this example, and each has a distinct data-theme attribute. The elements in each section, including buttons, headers, and footers, will automatically take on the style specified by their corresponding swatches when viewed in a mobile browser (or a browser that supports jQuery Mobile mimicry). This demonstrates how jQuery Mobile application theming simplifies the use of standardised visual styles throughout your mobile UI.

You can mix and match colours on a page to better control your work’s look and feel. A page may have data-theme=”c” overall but “b” in its header and “e” in a form element.

Customizing Swatches and Theming Elements

jQuery Mobile application theming are highly customisable because they are mostly determined by CSS, even though the preset palettes provide a decent starting point. A custom stylesheet that replaces the desired default styles is the most efficient approach to alter an existing swatch or theme. For your override rules to take effect, it is essential that this custom CSS be loaded after the main jQuery Mobile application theming stylesheet.

In order to change Swatch ‘e’, which is normally a yellow colour idea, to a green colour scheme, you might develop a custom CSS as follows.

To begin, make a CSS file with your override rules (such as custom-swatch-e.css). By altering their background colours, borders, and text shadows to green hues, these rules specifically target the CSS classes that jQuery Mobile application theming uses for Swatch ‘e’ (such as.ui-bar-e,.ui-body-e, and.ui-btn-up-e).

Code example:

The jQuery Mobile CSS would then be followed by this custom stylesheet in your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Custom Swatch E Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <link rel="stylesheet" href="custom-swatch-e.css" /> <!-- Load your custom CSS after jQuery Mobile's CSS -->
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
    <section id="swatch-e-customized" data-role="page" data-theme="e">
        <header data-role="header"><h1>Custom Swatch E</h1></header>
        <div data-role="content">
            <h3>This content uses the customized 'e' swatch.</h3>
            <p>Form elements and buttons will reflect the new green theme.</p>
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" data-role="button">Yes</a>
                <a href="#" data-role="button">No</a>
                <a href="#" data-role="button">Cancel</a>
            </div>
        </div>
        <footer data-role="footer"><h1>Custom Footer</h1></footer>
    </section>
</body>
</html>

Output:

Custom Swatch E

This content uses the customized 'e' swatch.
Form elements and buttons will reflect the new green theme.
Yes    No    Cancel

Custom Footer

You have total control over how your application looks with this method, which guarantees that your custom styles will be used over the jQuery Mobile styles by default.

jQuery Mobile provides even more design refinement by offering unique data-attributes for theming components like as list views, in addition to basic page elements. List dividers can be themed using data-divider-theme, data-count-theme for count bubbles, and data-split-theme and icon for split buttons. This shows how flexible and controlled jQuery Mobile application theming theming is.

Conclusion

In conclusion, jQuery Mobile application theming theming engine, powered by CSS3 and its adaptive swatch notion, lets developers easily create visually beautiful and engaging mobile application theming apps. The data-theme functionality makes installing predefined or custom swatches easy, and overriding CSS rules lets you customise the application’s look and feel to suit design criteria. This comprehensive technique simplifies complex and responsive mobile device designs.

Page Content

Tutorials