Checkboxradio: Get rid of buttonMarkup.

Author: Gabriel Schulhof

css/structure/jquery.mobile.forms.checkboxradio.css

@@ -9,7 +9,6 @@
 .ui-checkbox .ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 36px; }
 .ui-checkbox .ui-btn-icon-top .ui-btn-inner, .ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
 .ui-checkbox .ui-btn-icon-bottom .ui-btn-inner, .ui-radio .ui-btn-icon-bottom .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
-.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
 .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
 .ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
 .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }

css/themes/default/jquery.mobile.theme.css

@@ -849,10 +849,7 @@ button,
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 }
-.ui-icon-checkbox-off,
-.ui-icon-radio-off {
-	background-color: transparent;	
-}
+
 .ui-checkbox-on .ui-icon,
 .ui-radio-on .ui-icon {
 	background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */

js/widgets/forms/checkboxradio.js

@@ -12,7 +12,6 @@
 define( [ "jquery",
 	"../../jquery.mobile.core",
 	"../../jquery.mobile.widget",
-	"../../jquery.mobile.buttonMarkup",
 	"../optionDemultiplexer",
 	"./reset" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
@@ -37,7 +36,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 			mini = inheritAttr( input, "mini" ) || o.mini,
 			checkedState = inputtype + "-on",
 			uncheckedState = inputtype + "-off",
-			iconpos = inheritAttr( input, "iconpos" ),
+			iconpos = inheritAttr( input, "iconpos" ) || "left",
 			checkedClass = "ui-" + checkedState,
 			uncheckedClass = "ui-" + uncheckedState,
 			wrapper;
@@ -46,20 +45,16 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 			return;
 		}
 
+		// Establish options
 		// If there's no selected theme check the data attr
 		if ( !o.theme ) {
 			o.theme = $.mobile.getInheritedTheme( this.element, "a" );
 		}
+		o.mini = inheritAttr( input, "mini" ) || o.mini;
 
 		// Expose for other methods
 		$.extend( this, {
-			//save buttonMarkup options to use them in refresh
-			buttonMarkupOptions: {
-				theme: o.theme,
-				shadow: false,
-				mini: mini,
-				iconpos: iconpos
-			},
+			iconpos: iconpos,
 			label: label,
 			inputtype: inputtype,
 			checkedClass: checkedClass,
@@ -71,8 +66,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 		// Wrap the input + label in a div
 		wrapper = document.createElement( "div" );
 		wrapper.className = "ui-" + inputtype;
-
 		input.add( label ).wrapAll( wrapper );
+		label.addClass( "ui-btn ui-btn-corner-all ui-btn-icon-" + iconpos );
 
 		this._on( label, {
 			vmouseover: "_handleLabelVMouseOver",
@@ -87,6 +82,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 		});
 
 		this._handleFormReset();
+		this._setOptions( o );
 		this.refresh();
 	},
 
@@ -183,20 +179,21 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 	refresh: function() {
 		var input = this.element[ 0 ],
 			active = " " + $.mobile.activeBtnClass,
-			checkedClass = this.checkedClass + ( this.element.parents( ".ui-controlgroup-horizontal" ).length ? active : "" ),
-			label = this.label,
-			options = this.buttonMarkupOptions;
-
+			hasIcon = ( this.element.parents( ".ui-controlgroup-horizontal" ).length === 0 ),
+			checkedClass = this.checkedClass + ( hasIcon ? "" : active ),
+			label = this.label;
+
+		label
+			.toggleClass( "ui-btn-icon-" + this.iconpos, hasIcon )
+			.toggleClass( "ui-icon", hasIcon )
+			.toggleClass( "ui-icon-" + this.checkedicon, input.checked )
+			.toggleClass( "ui-icon-" + this.uncheckedicon, !input.checked );
 		if ( input.checked ) {
-			options.icon = this.checkedicon;
-			label.removeClass( this.uncheckedClass + active ).addClass( checkedClass ).buttonMarkup( options );
+			label.removeClass( this.uncheckedClass + active ).addClass( checkedClass );
 		} else {
-			options.icon = this.uncheckedicon;
-			label.removeClass( checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( options );
+			label.removeClass( checkedClass ).addClass( this.uncheckedClass );
 		}
 
-		this.buttonMarkupOptions = {};
-
 		if ( input.disabled ) {
 			this.disable();
 		} else {
@@ -205,11 +202,11 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, $.extend( {
 	},
 
 	_setTheme: function( value ) {
-		this.label.buttonMarkup( { theme: value } );
+		this.label.removeClass( "ui-btn-" + this.options.theme ).addClass( "ui-btn-" + value );
 	},
 
 	_setMini: function( value ) {
-		this.label.buttonMarkup( { mini: !!value } );
+		this.label.toggleClass( "ui-mini", !!value );
 	},
 
 	_setDisabled: function( value ) {