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