JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>floswitches testbed</title>
        <link rel="stylesheet" href="css/jquery.floswitches.css" />
        <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="js/jquery.floswitches.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                font-family: 'Helvetica';
                background-color: #eee;
                padding: 2em;
            }
            *:focus {
                outline: none;
            }            
            p {
                margin-bottom: 2em;
            }        
            p.nonfloat {
                float: none;
                clear: left;
            }
            p.nonfloat label {
                width: 104px;
                text-align: right;
                margin-right: 26px;
                margin-bottom: 26px;
                padding-top: 0.25em;
                line-height: 1.5em;
                float: left;
            }
            p.nonfloat label:hover {
                cursor: pointer;
            }
            p {
                clear: left;    
            }
        </style>
    </head>
    <body>
        <section id="form">
            <p>Please also try clicking the labels and navigating with TAB + SPACE. Thank you.</p>
            <form>
                <p class="nonfloat">
                    <label for="sprinkles">Regular switch</label>
                </p>
                <input id="sprinkles" type="floswitch" />
                <p class="nonfloat">
                    <label for="unicorns">3-way switch</label>
                </p>
                <input id="unicorns" type="flomultiswitch" />
                <p>3-way switches you ask? Because I can!</p>
            </form>
        </section>
    </body>
</html>

CSS

div.floswitch {
    width: 80px;
    font-family: 'Helvetica';
    height: 30px;
    line-height: 2em;
    float: left;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: /*#909090*/ #ddd;
    border: 2px solid #ddd;
    box-shadow:inset 0 0 2px #333;
    overflow: hidden;
    -webkit-user-select: none;
    margin-bottom: 1.5em;
}

div.flomultiswitch {
    width: 130px;
    font-family: 'Helvetica';
    height: 30px;
    line-height: 2em;
    float: left;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: /*#909090*/ #ddd;
    border: 2px solid #ddd;
    box-shadow:inset 0 0 2px #333;
    overflow: hidden;
    -webkit-user-select: none;
}

div.floswitch:hover, div.floswitch:focus {
    border: 2px solid white;
    cursor: pointer;
}

div.flomultiswitch:hover, div.flomultiswitch:focus {
    border: 2px solid white;
    cursor: pointer;
}

div.floswitch span {
    display: block;
    float: right;
    pointer-events: none;
    padding-right: 10px;
    -webkit-user-select: none;
}

div.innerfloswitch {
    color: white;
    width: 15px;
    line-height: 2em;
    background-color: transparent;
    height: 30px;
    display: block;
    position: absolute;
    left: 0px;
    border-radius: 30px 0 0 30px;
    top: 0;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
}

div.innerflomultiswitch {
    color: white;
    width: 15px;
    line-height: 2em;
    background-color: transparent;
    height: 30px;
    display: block;
    position: absolute;
    right: 115px;
    border-radius: 30px 0 0 30px;
    top: 0;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
}

div.innerfloswitch span {
    padding-right: 0px;
}

div.innerfloswitch a, div.innerflomultiswitch a {
    width: 30px;
    height: 30px;
    display: block;
    background-color: #fcfcfc;
    background-image:...

JavaScript

$(document).ready(function() {
    
    $.each($('input[type=floswitch]'), function(i,e) {
        $(e).wrap('<div class="floswitch" tabindex="0" />');
        $(e).attr('tabindex','-1');
        $(e).before('<div class="innerfloswitch"><a>flip me!</a><span>ON</span></div><span>OFF</span>');
    });
    
    $.each($('input[type=flomultiswitch]'), function(i,e) {
        $(e).wrap('<div class="flomultiswitch" tabindex="0" />');
        $(e).attr('tabindex','-1');
        $(e).before('<div class="innerflomultiswitch"><a>flip me!</a></div>');
    });
    
    $.each($('label'), function(i,e) {
        var field = $('#'+$(e).attr('for'));
        if(field.attr('type') === 'floswitch'){
            $(e).bind('click', function(event) {
                event.preventDefault();
                field.parent('div.floswitch').focus();
                flip(field.parent('div.floswitch'));
            });
        }
        if(field.attr('type') === 'flomultiswitch'){
            $(e).bind('click', function(event) {
                event.preventDefault();
                field.parent('div.flomultiswitch').focus();
                pushUp(field.parent('div.flomultiswitch'));
            });
        }
    });

    $.each($('div.floswitch input'), function(i,e) {
        if($(e).attr('value') === '1'){
            flip($(e).parent('div.floswitch'));
        }
    });

    $('div.floswitch').keyup(function(event) {
        if (event.keyCode == '32') {
            var switchInQuestion = $('div.floswitch:focus');
            flip(switchInQuestion);
        }
    });

    $('div.floswitch').click(function(event) {
        flip(event.target);
    });
    
    $.each($('div.flomultiswitch input'), function(i,e) {
        if($(e).attr('value') === '1'){
            pushUp($(e).parent('div.flonultiswitch'));
        }
    });

    $('div.flomultiswitch').keyup(function(event) {
        if (event.keyCode == '32') {
            var switchInQuestion = $('div.flomultiswitch:focus');
          ...