css/structure/jquery.mobile.forms.flipswitch.css

@@ -1,15 +1,17 @@
-div.ui-flipswitch{
+.ui-flipswitch {
 	display: inline-block;
     vertical-align: middle;
     background-size: 100% 100%;
     background-origin: border-box;
     background-clip: border-box;
-    background-position:100% 0;
+    background-position: 100% 0;
     overflow: hidden;
     height: 32px;
     width: 5.8em;
-    padding-left:.15em;
-    margin:.5em 0;
+    padding-left: .15em;
+    margin: .5em 0;
+	border-width: 1px;
+	border-style: solid;
     transition-duration: .2s;
     transition-property: padding, width, background-color, background-position;
     -webkit-touch-callout: none;
@@ -19,48 +21,45 @@ div.ui-flipswitch{
 	-ms-user-select: none;
 	user-select: none;
 }
-.ui-flipswitch-input{
+.ui-flipswitch-input {
 	position: absolute;
-    left:-1000px;
-    border:none;
+    left: -1000px;
+    border: none;
     opacity: 0;
 }
-div.ui-flipswitch.ui-flipswitch-active{
+.ui-flipswitch.ui-flipswitch-active {
 	padding-left: 4.1em;
-    background-position:0 0;
+    background-position: 0 0;
     width: 1.85em;
-    background-color:#0066ff;
 }
-html .ui-bar-a .ui-btn.ui-btn-a.ui-flipswitch-on{
+.ui-flipswitch .ui-btn.ui-flipswitch-on {
 	float: left;
     width: 28px;
     height: 28px;
     padding: 0;
     margin: .08em 0 0 -.1em;
-    text-align:inherit;
-    border: 1px solid #d5d5d5;
+    text-align: inherit;
+    border-width: 1px;
+	border-style: solid;
     border-radius: inherit;
-    background: #ededed;
-    color: white;
     overflow: visible;
-    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
+	color: inherit;
+	text-shadow: inherit;
     text-indent: -2.5em;
 }
-.ui-flipswitch-off{
+.ui-flipswitch .ui-btn.ui-flipswitch-off {
     float: left;
     text-indent: .5em;
-    color: #333;
-    text-shadow: none;
 }
 /*ie8*/
 .ui-flipswitch-on,
-.ui-flipswitch-off{
+.ui-flipswitch-off {
 	font-size: 1em;
-    padding-top:5px;
+    padding-top: 5px;
 }
 /*everything else*/
 :root .ui-flipswitch-on,
-:root .ui-flipswitch-off{
+:root .ui-flipswitch-off {
 	padding-top: 2px;
     font: bold 1em/1.9 sans-serif;
 }

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

@@ -317,6 +317,12 @@ html .ui-bar-a .ui-icon-checkbox-on:after,
 html .ui-body-a .ui-icon-checkbox-on:after,
 html body .ui-group-theme-a .ui-icon-checkbox-on:after,
 .ui-btn.ui-icon-checkbox-on.ui-btn-a:after,
+/* Active flipswitch background */
+.ui-page-theme-a .ui-flipswitch-active,
+html .ui-bar-a .ui-flipswitch-active,
+html .ui-body-a .ui-flipswitch-active,
+html body .ui-group-theme-a .ui-flipswitch-active,
+html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
 /* Active slider track */
 .ui-page-theme-a .ui-slider-track .ui-btn-active,
 html .ui-bar-a .ui-slider-track .ui-btn-active,
@@ -497,6 +503,12 @@ html .ui-bar-b .ui-icon-checkbox-on:after,
 html .ui-body-b .ui-icon-checkbox-on:after,
 html body .ui-group-theme-b .ui-icon-checkbox-on:after,
 .ui-btn.ui-icon-checkbox-on.ui-btn-b:after,
+/* Active flipswitch background */
+.ui-page-theme-b .ui-flipswitch-active,
+html .ui-bar-b .ui-flipswitch-active,
+html .ui-body-b .ui-flipswitch-active,
+html body .ui-group-theme-b .ui-flipswitch-active,
+html body .ui-flipswitch.ui-bar-b.ui-flipswitch-active,
 /* Active slider track */
 .ui-page-theme-b .ui-slider-track .ui-btn-active,
 html .ui-bar-b .ui-slider-track .ui-btn-active,

js/widgets/forms/flipswitch.js

@@ -14,13 +14,13 @@ $.widget( "mobile.flipswitch", $.extend({
 	options: {
 		onText: "On",
 		offText: "Off",
-		theme: "a",
+		theme: null,
 		enhanced: false,
 		wrapperClass: null
 	},
 
-	_create: function(){
-			if( !this.options.enhanced ){
+	_create: function() {
+			if ( !this.options.enhanced ) {
 				this._enhance();
 			} else {
 				$.extend( this, {
@@ -34,7 +34,7 @@ $.widget( "mobile.flipswitch", $.extend({
 			this._on( this.flipswitch, {
 				"click": "_toggle",
 				"swipeleft": "_left",
-				"swiperight":"_right"
+				"swiperight": "_right"
 			});
 
 			this._on( this.on, {
@@ -46,88 +46,98 @@ $.widget( "mobile.flipswitch", $.extend({
 		return this.element.flipswitch;
 	},
 
-	_left: function(){
+	_left: function() {
 		this.flipswitch.removeClass( "ui-flipswitch-active" );
-		if( this.type === "SELECT" ){
+		if ( this.type === "SELECT" ) {
 			this.element.get( 0 ).selectedIndex = 0;
 		} else {
 			this.element.prop( "checked", true );
 		}
-		this._trigger("change");
+		this._trigger( "change" );
 	},
 
-	_right: function(){
+	_right: function() {
 		this.flipswitch.addClass( "ui-flipswitch-active" );
-		if( this.type === "SELECT" ){
+		if ( this.type === "SELECT" ) {
 			this.element.get( 0 ).selectedIndex = 1;
 		} else {
 			this.element.prop( "checked", false );
 		}
-		this._trigger("change");
+		this._trigger( "change" );
 	},
 
-	_enhance: function(){
-		var flipswitch = $( "<div>" );
+	_enhance: function() {
+		var flipswitch = $( "<div>" ),
+			theme = this.options.theme ? this.options.theme : "inherit",
 			on = $( "<span tabindex='1'>" ),
 			off = $( "<span>" ),
 			type = this.element.get( 0 ).tagName,
-			onText = ( type === "INPUT" )? this.options.onText: this.element.find( "option" ).eq( 0 ).text(),
-			offText = ( type === "INPUT" )? this.options.offText: this.element.find( "option" ).eq( 1 ).text();
+			onText = ( type === "INPUT" ) ? this.options.onText : this.element.find( "option" ).eq( 0 ).text(),
+			offText = ( type === "INPUT" ) ? this.options.offText : this.element.find( "option" ).eq( 1 ).text();
 
-			on.addClass( "ui-flipswitch-on ui-btn ui-shadow ui-btn-" + this.options.theme ).text( onText );
+			on.addClass( "ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit" ).text( onText );
 			off.addClass( "ui-flipswitch-off" ).text( offText );
-			flipswitch.addClass( "ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all ui-bar-" + this.options.theme + " " + ( this.options.wrapperClass ? this.options.wrapperClass : "" ) + " " + ( this.element.is( ":checked" )? "ui-flipswitch-active": "" ) ).append( on, off );
+
+			flipswitch.addClass( "ui-flipswitch ui-shadow-inset ui-bar-inherit ui-corner-all ui-bar-" + theme + " " + ( this.options.wrapperClass ? this.options.wrapperClass : "" ) + " " + ( this.element.is( ":checked" ) ? "ui-flipswitch-active" : "" ) ).append( on, off );
+
 			this.element.addClass( "ui-flipswitch-input" );
 			this.element.after( flipswitch ).appendTo( flipswitch );
 
 		$.extend( this, {
-			flipswitch:flipswitch,
-			on:on,
-			off:off,
-			type:type
+			flipswitch: flipswitch,
+			on: on,
+			off: off,
+			type: type
 		});
 	},
 
 	_change: function() {
 		var direction;
-		if( this.type === "SELECT" ){
+
+		if ( this.type === "SELECT" ) {
 			direction = ( this.element.get( 0 ).selectedIndex > 0 )? "_right": "_left";
 		} else {
 			direction = this.element.is( ":checked" )? "_right": "_left";
 		}
 		this[ direction ]();
 	},
 
-	_toggle: function(){
-		var direction = this.flipswitch.hasClass("ui-flipswitch-active")? "_left": "_right";
+	_toggle: function() {
+		var direction = this.flipswitch.hasClass( "ui-flipswitch-active" ) ? "_left" : "_right";
+
 		this[direction]();
 	},
 
-	_keydown: function( e ){
-		if( e.which === $.mobile.keyCode.LEFT ){
+	_keydown: function( e ) {
+		if ( e.which === $.mobile.keyCode.LEFT ) {
 			this._left();
-		} else if( e.which === $.mobile.keyCode.RIGHT ){
+		} else if ( e.which === $.mobile.keyCode.RIGHT ) {
 			this._right();
-		} else if( e.which === $.mobile.keyCode.SPACE ){
+		} else if ( e.which === $.mobile.keyCode.SPACE ) {
 			this._toggle();
 			e.preventDefault();
 		}
 	},
 
-	_setOptions: function( options ){
-		if( options.theme !== undefined ) {
-			this.widget().removeClass( "ui-body-" + this.options.theme ).addClass( "ui-body-" + options.theme );
+	_setOptions: function( options ) {
+		if ( options.theme !== undefined ) {
+			var currentTheme = options.theme ? options.theme : "inherit",
+				newTheme = options.theme ? options.theme : "inherit";
+
+			this.widget()
+				.removeClass( "ui-bar-" + currentTheme )
+				.addClass( "ui-bar-" + newTheme );
 		}
-		if( options.onText !== undefined ) {
+		if ( options.onText !== undefined ) {
 			this.on.text( options.onText );
 		}
-		if( options.offText ) {
+		if ( options.offText ) {
 			this.off.text( options.offText );
 		}
 	},
 
-	_destroy: function(){
-		if( this.options.enhanced ){
+	_destroy: function() {
+		if ( this.options.enhanced ) {
 			return;
 		}
 		this.on.remove();