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!

  • yves

    Can you show an example-initialization of $(“#id”).scroller({}); with the various jqm-swatch params set?

    • Greg

       yves, I was looking for the same thing, an implementation example.  Figured it out, at least part way:  copy and paste the javascript above (function thru JQuery) to the end of your mobiscroll.js, then edit as needed. I imagine there are other places you can copy/paste this, but the above worked for me.

  • Nicole Chung

    This line:
    $(‘.dwb-s a’, elm).attr(‘data-role’, ‘button’).attr(‘data-theme’, s.jqmSet);

    Doesn’t set the theme for my “Set” button (note: I am using the modal popup, does this make a difference?).

    If I try:

    $(‘.dwb-s’, elm).attr(‘data-role’, ‘button’).attr(‘data-theme’, s.jqmSet);

    i.e. minus the “a” this does change the theme of my button, however then pressing “set” only works intermittently?

    I’m using version 2.3.1