Support for control groups in header/footer

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){
 			$('<div role="heading" class="ui-controlgroup-label">'+ groupheading.html() +'</div>').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);

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" );
 

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; } 
+.min-width-480px .ui-controlgroup-controls { width: 60%; display: inline-block; } 
+
+.ui-header .ui-controlgroup,
+.ui-fotter .ui-controlgroup { margin:0 0 1em; }