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.
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund