From 6aa11f9f890bf98092dd5ea35d5b8ca9ca2eef4c Mon Sep 17 00:00:00 2001 From: Daniel Cousineau Date: Wed, 5 Jan 2011 16:33:58 -0600 Subject: [PATCH] Styling support for control groups in header/footers, matching other button styles --- js/jquery.mobile.controlGroup.js | 40 +++++++++++-------- js/jquery.mobile.page.js | 2 +- themes/default/jquery.mobile.controlgroup.css | 5 ++- 3 files changed, 29 insertions(+), 18 deletions(-) diff --git a/js/jquery.mobile.controlGroup.js b/js/jquery.mobile.controlGroup.js index 49365d70cd3..bd89f9f21af 100644 --- a/js/jquery.mobile.controlGroup.js +++ b/js/jquery.mobile.controlGroup.js @@ -8,12 +8,15 @@ $.fn.controlgroup = function(options){ 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 80283117bd5..9be1110c813 100644 --- a/js/jquery.mobile.page.js +++ b/js/jquery.mobile.page.js @@ -63,7 +63,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