Contents
General Calendar Cards Color Date & Time Event Calendar Forms Image Listview Measurement Navigation Number Numpad Option List Page Range Scroller Scrollview Select Timer Timespan Treelist Widget Tools Accessibility

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);
        }
    };
}
})();