diff --git a/css/structure/jquery.mobile.button.css b/css/structure/jquery.mobile.button.css index 6fdc9ee6e63..26c955ee266 100644 --- a/css/structure/jquery.mobile.button.css +++ b/css/structure/jquery.mobile.button.css @@ -7,6 +7,10 @@ .ui-header .ui-btn, .ui-footer .ui-btn { display: inline-block; margin: 0; } +.ui-header .ui-btn-block, +.ui-footer .ui-btn-block { display: block; margin: .25em 5px; } +.ui-header .ui-btn-block.ui-fullsize, +.ui-footer .ui-btn-block.ui-fullsize { margin: .5em 5px; } .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js index c5f32b46188..d88b556ca7f 100644 --- a/js/jquery.mobile.buttonMarkup.js +++ b/js/jquery.mobile.buttonMarkup.js @@ -70,21 +70,19 @@ $.fn.buttonMarkup = function( options ) { } buttonClass = "ui-btn ui-btn-up-" + o.theme; - buttonClass += o.inline ? " ui-btn-inline" : ""; buttonClass += o.shadow ? " ui-shadow" : ""; buttonClass += o.corners ? " ui-btn-corner-all" : ""; if ( o.mini !== undefined ) { // Used to control styling in headers/footers, where buttons default to `mini` style. - buttonClass += o.mini ? " ui-mini" : " ui-fullsize"; + buttonClass += o.mini === true ? " ui-mini" : " ui-fullsize"; } if ( o.inline !== undefined ) { - // Used to control styling in headers/footers, where buttons default to `mini` style. - buttonClass += o.inline === false ? " ui-btn-block" : " ui-btn-inline"; + // Used to control styling in headers/footers, where buttons default to `inline` style. + buttonClass += o.inline === true ? " ui-btn-inline" : " ui-btn-block"; } - if ( o.icon ) { o.icon = "ui-icon-" + o.icon; o.iconpos = o.iconpos || "left"; @@ -241,7 +239,7 @@ var attachEvents = function() { $( document ).bind( "pagecreate create", function( e ){ $( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a, .ui-bar > :jqmData(role='controlgroup') > a", e.target ) - .not( ".ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" ) + .not( "button, input, .ui-btn, :jqmData(role='none'), :jqmData(role='nojs')" ) .buttonMarkup(); }); diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js index 9a5146046b3..f070b4ffe83 100644 --- a/js/jquery.mobile.forms.button.js +++ b/js/jquery.mobile.forms.button.js @@ -13,12 +13,10 @@ $.widget( "mobile.button", $.mobile.widget, { theme: null, icon: null, iconpos: null, - inline: false, corners: true, shadow: true, iconshadow: true, - initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']", - mini: false + initSelector: "button, [type='button'], [type='submit'], [type='reset'], [type='image']" }, _create: function() { var $el = this.element, @@ -26,6 +24,8 @@ $.widget( "mobile.button", $.mobile.widget, { o = this.options, type, name, + inline = o.inline || $el.jqmData( "inline" ), + mini = o.mini || $el.jqmData( "mini" ), classes = "", $buttonPlaceholder; @@ -61,11 +61,11 @@ $.widget( "mobile.button", $.mobile.widget, { theme: o.theme, icon: o.icon, iconpos: o.iconpos, - inline: o.inline, + inline: inline, corners: o.corners, shadow: o.shadow, iconshadow: o.iconshadow, - mini: o.mini + mini: mini }) .addClass( classes ) .append( $el.addClass( "ui-btn-hidden" ) );