diff --git a/js/jquery.mobile.controlGroup.js b/js/jquery.mobile.controlGroup.js index 6a819c94cac..d66cd549aff 100644 --- a/js/jquery.mobile.controlGroup.js +++ b/js/jquery.mobile.controlGroup.js @@ -6,14 +6,17 @@ */ (function($, undefined ) { $.fn.controlgroup = function(options){ - - return this.each(function(){ + + return $(this).each(function(){ + var inHeaderFooter = $(this).parents('[data-role="header"],[data-role="footer"]').length > 0 ? true : false; var o = $.extend({ direction: $( this ).data( "type" ) || "vertical", - shadow: false + shadow: inHeaderFooter ? true : false },options); var groupheading = $(this).find('>legend'), - flCorners = o.direction == 'horizontal' ? ['ui-corner-left', 'ui-corner-right'] : ['ui-corner-top', 'ui-corner-bottom'], + flCorners = inHeaderFooter ? + o.direction == 'horizontal' ? ['ui-btn-corner-left', 'ui-btn-corner-right'] : ['ui-btn-corner-top', 'ui-btn-corner-bottom'] + : o.direction == 'horizontal' ? ['ui-corner-left', 'ui-corner-right'] : ['ui-corner-top', 'ui-corner-bottom'], type = $(this).find('input:eq(0)').attr('type'); //replace legend with more stylable replacement div @@ -22,21 +25,26 @@ $.fn.controlgroup = function(options){ $('
'+ groupheading.html() +'
').insertBefore( $(this).children(0) ); groupheading.remove(); } + + if( inHeaderFooter ) + $(this).addClass('ui-btn-corner-all'); + else + $(this).addClass('ui-corner-all'); + + $(this).addClass('ui-controlgroup ui-controlgroup-'+o.direction); - $(this).addClass('ui-corner-all ui-controlgroup ui-controlgroup-'+o.direction); - - function flipClasses(els){ - els - .removeClass('ui-btn-corner-all ui-shadow') - .eq(0).addClass(flCorners[0]) - .end() - .filter(':last').addClass(flCorners[1]).addClass('ui-controlgroup-last'); - } - flipClasses($(this).find('.ui-btn')); - flipClasses($(this).find('.ui-btn-inner')); - if(o.shadow){ - $(this).addClass('ui-shadow'); - } + function flipClasses(els){ + els + .removeClass('ui-btn-corner-all ui-shadow') + .eq(0).addClass(flCorners[0]) + .end() + .filter(':last').addClass(flCorners[1]).addClass('ui-controlgroup-last'); + } + flipClasses($(this).find('.ui-btn')); + flipClasses($(this).find('.ui-btn-inner')); + if(o.shadow || inHeaderFooter){ + $(this).addClass('ui-shadow'); + } }); }; })(jQuery); \ No newline at end of file diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js index fb7a082df01..67b5b704763 100644 --- a/js/jquery.mobile.page.js +++ b/js/jquery.mobile.page.js @@ -67,7 +67,7 @@ $.widget( "mobile.page", $.mobile.widget, { $this.attr( "role", role === "header" ? "banner" : "contentinfo" ); //right,left buttons - var $headeranchors = $this.children( "a" ), + var $headeranchors = $this.children( "a,[data-role='controlgroup']" ), leftbtn = $headeranchors.hasClass( "ui-btn-left" ), rightbtn = $headeranchors.hasClass( "ui-btn-right" ); diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css index abeffef57a2..bff50e5f58e 100644 --- a/themes/default/jquery.mobile.controlgroup.css +++ b/themes/default/jquery.mobile.controlgroup.css @@ -24,4 +24,7 @@ */ .min-width-480px .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; } -.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; } \ No newline at end of file +.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; } + +.ui-header .ui-controlgroup, +.ui-fotter .ui-controlgroup { margin:0 0 1em; } \ No newline at end of file