On/Off Control

A jQuery On/Off UI component.

by Troy Alford

HTML

<div id="OnOff">&nbsp;</div>
<div id="StopGo">&nbsp;</div>
<div id="YesNo">&nbsp;</div>
<div id="Default">&nbsp;</div>

CSS

#OnOff, #StopGo, #YesNo, #Default {
    border: 1px solid #ddd;
    height: 35px;
    width: 100px;
    margin: 5px;
}

.x-onoff-wrapper {
}

.x-onoff-onbtn {
    background-color: #080;
}
.x-onoff-offbtn {
    background-color: #C00;
}

.x-onoff-onbtn>span,
.x-onoff-offbtn>span {
    color: #fff;
    font-family: Verdana;
    font-weight: bold;
}

.x-onoff-slider {
    background: #ddd;
    cursor: pointer;
}

JavaScript

$(function () {
   
    var defaults = {
        containerCls: 'x-onoff-container',
        wrapperCls: 'x-onoff-wrapper',
        
        // OnBtn Defaults
        onBtnCls: 'x-onoff-onbtn',
        onBtnTxt: 'On',
        
        // OffBtn Defaults
        offBtnCls: 'x-onoff-offbtn',
        offBtnTxt: 'Off',
        
        // Slider Defaults
        sliderCls: 'x-onoff-slider',
        
        // Value Defaults
        onValue: true,
        offValue: false
    };
    
    $.fn.OnOff = function(settings) {
        var options = $.extend(true, {}, defaults, settings);
        
        var $container = this
            .empty()
            .addClass(options.containerCls)
            .css({
                overflow: 'hidden',
                '-webkit-user-select': 'none',
                '-moz-user-select': 'none',
                '-khtml-user-select': 'none',
                'user-select': 'none'
            });
        
        var $wrapper = $('<div />')
            .addClass(options.wrapperCls)
            .css({
                border: '1px inset',
                left: 0, top: 0,
                height: ($container.height() - 2) + 'px',
                width: ($container.width() - 2) + 'px',
                position: 'relative'
            })
            .appendTo($container);

        var btnPadding = ($wrapper.height() / 2) - 7;
        
        var $onBtn = $('<div />')
            .addClass(options.onBtnCls)
            .css({
                left: 0, top: 0,
                height: $wrapper.height() + 'px',
                width: ($wrapper.width() * .5) + 'px',
                position: 'absolute',
                'text-align': 'left',
                'z-index': 1
            })
            .appendTo($wrapper);
        var $onBtnTxt = $('<span />')
            .html(options.onBtnTxt)
            .appendTo($onBtn)
            .css({ 'font-size': '12px', 'position': 'absolute' });
        $onBtnTxt.css({
                left:...