Contents

Writing themes

What are themes?

Themes are what make mobiscroll controls look as they do. They consist of CSS and optional Javascript.

When to write themes?

Write themes if you'd like a to create a new look & feel for your mobiscroll controls. The good news is, once you write a theme, you can reuse that with any type of control/preset. Themes can also override default settings, like wheel width. They also allow you to stay consistent with your application design guidelines. If the built-in themes don't work for you, create a custom one either for internal use or for sharing with the community.

Writing the javascript extension

Themes may have an optional javascript extension, which can override default settings and perform additional initializations:

(function () { 
    // Scroller, Numpad and Widget themes
    mobiscroll.themes.frame.mytheme = {
        width: 100,
        rows: 3,
        customOption1: 'a',
        customOption2: 'b',
        onMarkupReady: function(event, inst) {
            // event.trarget is the DOM Node  
            // containing the generated html
            var s = inst.settings; // Settings object
            // Sample initializations, e.g. adding
            // custom classes to set and cancel buttons
            event.target.querySelector('.dwb-s a').classList.add(s.customOption1);
            event.target.querySelector('.dwb-s b').classList.add(s.customOption2);
        }
    };

    // Listview themes
    mobiscroll.themes.listview.mytheme = {
        altRow: true,
        customItemClass: 'c',
        onInit: function(event, inst) {
            var s = inst.settings; // Settings object
            // Sample initializations, e.g. adding
            // a custom class to list items
            this.querySelector('.mbsc-lv-item').classList.add(s.customItemClass);
        }
    };

    // Menustrip themes
    mobiscroll.themes.menustrip.mytheme = {
        variant: 'b',
        customItemClass: 'c',
        onMarkupReady: function(event, inst) {
            // event.trarget is the DOM Node  
            // containing the generated html
            var s = inst.settings; // Settings object
            // Sample initializations, e.g. adding
            // a custom class to menustrip items
            event.target.querySelector('.mbsc-lv-item').classList.add(s.customItemClass);
        }
    };
}
})();

Theme options

Name Type Default value Description
jQuery Mobile Theme
jqmBorder String 'a' Swatch for picker border.
jqmBody String 'c' Swatch for picker body.
jqmHeader String 'b' Swatch for picker header.
jqmWheel String 'd' clickpick mode Swatch for wheel background ( only).
jqmClickPick String 'c' clickpick Swatch for buttons.
jqmSet String 'b' Swatch for set button.
jqmCancel String 'c' Swatch for cancel button.