Permalink
Browse files

Flip Switch: First pass at new widget

  • Loading branch information...
arschmitz committed Jun 6, 2013
1 parent 2978275 commit 09ab25184e4f69fc8f476df2fd33d9be8d4388f9
@@ -0,0 +1,66 @@
+div.ui-flipswitch{
+ display: inline-block;
+ vertical-align: middle;
+ background-size: 100% 100%;
+ background-origin: border-box;
+ background-clip: border-box;
+ background-position:100% 0;
+ overflow: hidden;
+ height: 32px;
+ width: 5.8em;
+ padding-left:.15em;
+ margin:.5em 0;
+ transition-duration: .2s;
+ transition-property: padding, width, background-color, background-position, text-indent;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ui-flipswitch-input{
+ position: absolute;
+ left:-1000px;
+ border:none;
+ opacity: 0;
+}
+.ui-flipswitch-input.ui-flipswitch-active + .ui-flipswitch{
+ padding-left: 4.1em;
+ background-position:0 0;
+ width: 1.85em;
+ background-color:#0066ff;
+}
+html .ui-bar-a .ui-btn.ui-btn-a.ui-flipswitch-on{
+ float: left;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ margin: .05em 0 0 -.1em;
+ text-align:inherit;
+ border: 1px solid #d5d5d5;
+ border-radius: inherit;
+ background: #ededed;
+ color: white;
+ overflow: visible;
+ text-shadow: 0 -1px 1px rgba(0,0,0,.3);
+ text-indent: -2.5em;
+}
+.ui-flipswitch-off{
+ float: left;
+ text-indent: .5em;
+ color: #333;
+ text-shadow: none;
+}
+/*ie8*/
+.ui-flipswitch-on,
+.ui-flipswitch-off{
+ font-size: 1em;
+ padding-top:5px;
+}
+/*everything else*/
+:root .ui-flipswitch-on,
+:root .ui-flipswitch-off{
+ padding-top: 2px;
+ font: bold 1em/1.9 sans-serif;
+}
@@ -17,6 +17,7 @@
@import url( "jquery.mobile.forms.slider.tooltip.css" );
@import url( "jquery.mobile.forms.rangeslider.css" );
@import url( "jquery.mobile.forms.textinput.css" );
+@import url( "jquery.mobile.forms.flipswitch.css" );
@import url( "jquery.mobile.table.css" );
@import url( "jquery.mobile.table.columntoggle.css" );
@import url( "jquery.mobile.table.reflow.css" );
@@ -64,7 +64,9 @@ label.ui-btn {
.ui-btn-corner-all,
.ui-btn.ui-corner-all,
/* Slider track */
-.ui-slider-track.ui-corner-all {
+.ui-slider-track.ui-corner-all,
+/*flipswitch*/
+.ui-flipswitch.ui-corner-all {
-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
border-radius: .3125em /*{global-radii-buttons}*/;
}
@@ -38,17 +38,23 @@
<p class="jqm-intro">Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
</p>
- <h2>Basic switch</h2>
+ <h2>Basic checkbox switch</h2>
<div data-demo-html="true">
<form>
- <label for="flip-1">Flip toggle switch:</label>
- <select name="flip-1" id="flip-1" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
+ <label for="flip-1">Flip toggle switch checkbox:</label>
+ <input type="checkbox" data-role="flipswitch" name="flip-1" id="flip-1"/>
</form>
</div><!-- /demo-html -->
-
+ <h2>Basic select switch</h2>
+ <div data-demo-html="true">
+ <form>
+ <label for="flip-select">Flip toggle switch select:</label>
+ <select id="flip-select" name="flip-select" data-role="flipswitch">
+ <option>Foo</option>
+ <option>Bar</option>
+ </select>
+ </form>
+ </div><!-- /demo-html -->
<h2>Theme</h2>
<div data-demo-html="true">
<form>
View
@@ -59,6 +59,7 @@
'widgets/forms/reset.js',
'widgets/forms/checkboxradio.js',
'widgets/forms/button.js',
+ 'widgets/forms/flipswitch.js',
'widgets/forms/slider.js',
'widgets/forms/slider.tooltip.js',
'widgets/forms/rangeslider.js',
View
@@ -26,6 +26,7 @@ define([
"./widgets/forms/checkboxradio",
"./widgets/forms/button",
"./widgets/forms/slider",
+ "./widgets/forms/flipswitch",
"./widgets/forms/rangeslider",
"./widgets/forms/textinput",
"./widgets/forms/clearButton",
@@ -249,7 +249,7 @@ $.widget( "mobile.checkboxradio", $.extend( {
}, $.mobile.behaviors.formReset ) );
-$.mobile.checkboxradio.initSelector = "input[type='checkbox'],input[type='radio']";
+$.mobile.checkboxradio.initSelector = "input:not( :jqmData(role='flipswitch' ) )[type='checkbox'],input[type='radio']:not( :jqmData(role='flipswitch' ))";
//auto self-init widgets
$.mobile._enhancer.add( "mobile.checkboxradio" );
@@ -0,0 +1,68 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Consistent styling for native select menus. Tapping opens a native select menu.
+//>>label: Flip Switch
+//>>group: Forms
+//>>css.structure: ../css/structure/jquery.mobile.forms.flip.css
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+
+define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", "../../jquery.mobile.zoom", "./reset", "../../jquery.mobile.registry" ], function( jQuery ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.widget( "mobile.flipswitch", $.mobile.widget, $.extend({
+ options: {
+ onText: "On",
+ offText: "Off",
+ theme: "a"
+ },
+ _create: function(){
+ var flipswitch = $("<div>");
+ 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.onText:this.element.find("option").eq(1).text();
+
+ on.addClass("ui-flipswitch-on ui-btn ui-shadow ui-btn-"+this.options.theme).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).append( on, off );
+ this.element.addClass("ui-flipswitch-input");
+ this.element.after( flipswitch );
+ $.extend( this, {
+ flipswitch:flipswitch,
+ on:on,
+ off:off,
+ type:type
+ });
+
+ this._on( flipswitch, {
+ "click": "_toggle"+type,
+ "swipe": "_toggle"+type
+ });
+ },
+ _toggleINPUT: function(){
+ this.element.toggleClass("ui-flipswitch-active").prop("checked", function(idx,attr){
+ return !attr;
+ });
+ },
+ _toggleSELECT: function(){
+ var index = this.element.get(0).selectedIndex;
+ this.element.toggleClass("ui-flipswitch-active").get(0).selectedIndex = ( index > 0 )? 0:1;
+
+ },
+ refresh: function(){
+
+ },
+ _setOptions: function(){
+
+ }
+}, $.mobile.behaviors.formReset ) );
+
+$.mobile.flipswitch.initSelector = ":jqmData(role='flipswitch')";
+
+//auto self-init widgets
+$.mobile._enhancer.add( "mobile.flipswitch" );
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
@@ -283,7 +283,7 @@ $.widget( "mobile.selectmenu", $.extend( {
}
}, $.mobile.behaviors.formReset ) );
-$.mobile.selectmenu.initSelector = "select:not( :jqmData(role='slider') )";
+$.mobile.selectmenu.initSelector = "select:not( :jqmData(role='slider')):not( :jqmData(role='flipswitch') )";
//auto self-init widgets
$.mobile._enhancer.add( "mobile.selectmenu" );

0 comments on commit 09ab251

Please sign in to comment.