jQuery Mobile theme integration
With 2.0 RC1 released we created a jQuery mobile theme.
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!