jQuery Mobile theme integration

With 2.0 RC1 released we created a jQuery mobile theme.

mobiscroll jQM Theme integration

This is not just a static theme, but it changes based on your jQuery Mobile swatches.

If you build applications using jQuery Mobile, you probably are familiar with the ThemeRoller.

For the default setup we have used a combination of swatches for the control elements.

defaults: {
jqmBody: 'c',
jqmHeader:'b',
jqmWheel: 'd',
jqmClickPick: 'c',
jqmSet: 'b',
jqmCancel: 'c'
}

As you can see there are several swatches used in the template, but you could create your own where you choose how each element looks.

(function ($) {
 
$.scroller.themes.jqm = {
defaults: {
jqmBody: 'c',
jqmHeader:'b',
jqmWheel: 'd',
jqmClickPick: 'c',
jqmSet: 'b',
jqmCancel: 'c'
},
init: function(elm, inst) {
var s = inst.settings;
$('.dw', elm).removeClass('dwbg').addClass('ui-overlay-shadow ui-corner-all ui-body-a');
$('.dwb-s a', elm).attr('data-role', 'button').attr('data-theme', s.jqmSet);
$('.dwb-c a', elm).attr('data-role', 'button').attr('data-theme', s.jqmCancel);
$('.dwwb', elm).attr('data-role', 'button').attr('data-theme', s.jqmClickPick);
$('.dwv', elm).addClass('ui-header ui-bar-' + s.jqmHeader);
$('.dwwr', elm).addClass('ui-body-' + s.jqmBody);
$('.dwpm .dww', elm).addClass('ui-body-' + s.jqmWheel);
if (s.display != 'inline')
$('.dw', elm).addClass('pop in');
elm.trigger('create');
// Hide on overlay click
$('.dwo', elm).click(function() { inst.hide(); });
}
}
 
})(jQuery);

To see it in action head over to http://demo.mobiscroll.com (Make sure you choose the jQuery Mobile Theme)
For more information of jQuery Mobile themes go to http://jquerymobile.com/themeroller/
For more information on mobiscroll go to http://docs.mobiscroll.com

Let us know what you think, in the comment section below!

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!