HTML5, CSS3 & JS Experiments

By Martin Ivanov

Toggle Switch Element

X-Switch is a HTML5 Web Component for creating beautiful and skinnable multipurpose flip switches out of the box as simple HTML tags and small, but powerful native JavaScript API:

<acidjs-xswitch></acidjs-xswitch>
<acidjs-xswitch labeloff="aus" labelon="ein"></acidjs-xswitch>
<acidjs-xswitch mode="on" labeloff="aus" labelon="ein"></acidjs-xswitch>
<acidjs-xswitch mode="off" labeloff="изкл" labelon="вкл"></acidjs-xswitch>
<acidjs-xswitch enabled="false"></acidjs-xswitch>
<acidjs-xswitch mode="on" enabled="false"></acidjs-xswitch>
<acidjs-xswitch labeloff=" " labelon=" "></acidjs-xswitch>

X-Switch is a follow up of my How to Create iPhone Toggle Buttons with CSS3 and HTML5, CSS3 and JavaScript iPhone Toggle Switch Button experimenta.

Demo

Default, No Attributes

Default, Custom Labels, Custom Width

Custom Labels, Turned On

Custom Labels, Turned Off, Custom Width

Default, Disabled

Default, On, Disabled

Default, No Labels

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XSwitch/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XSwitch/classes/XSwitch.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            <h4>Default, No Attributes</h4>
            <acidjs-xswitch></acidjs-xswitch>
            
            <h4>Default, Custom Labels, Custom Width</h4>
            <acidjs-xswitch labeloff="aus" labelon="ein" style="width: 200px;"></acidjs-xswitch>
            
            <h4>Custom Labels, Turned On</h4>
            <acidjs-xswitch mode="on" labeloff="aus" labelon="ein"></acidjs-xswitch>
            
            <h4>Custom Labels, Turned Off, Custom Width</h4>
            <acidjs-xswitch mode="off" labeloff="изкл" labelon="вкл" style="width: 100px;"></acidjs-xswitch>
            
            <h4>Default, Disabled</h4>
            <acidjs-xswitch enabled="false"></acidjs-xswitch>
            
            <h4>Default, On, Disabled</h4>
            <acidjs-xswitch mode="on" enabled="false"></acidjs-xswitch>
            
            <h4>Default, No Labels</h4>
            <acidjs-xswitch labeloff=" " labelon=" "></acidjs-xswitch>
            
            
        
/*
 * X-Switch HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/
acidjs-xswitch,
acidjs-xswitch *,
acidjs-xswitch *::before
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xswitch
{
    display: inline-block;
    border: solid 2px #e34c26;
    border-radius: 28px;
    background: #fff;
    width: 64px;
    min-width: 46px;
    visibility: hidden;
}

acidjs-xswitch label
{
    display: block;
    height: 26px;
    padding: 2px;
    position: relative;
    padding-right: 24px;
    cursor: pointer;
}

acidjs-xswitch input
{
    opacity: 0;
    position: absolute;
    outline: 0;
    z-index: -1;
}

acidjs-xswitch span::before
{
    content: attr(data-label-off);
    position: absolute;
    left: 4px;
    padding-right: 8px;
    font: bold .7em Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    color: #ccc;
    display: block;
    width: 100%;
    text-align: right;
    line-height: 22px;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    user-select: none;
}

acidjs-xswitch span
{
    display: block;
    border-radius: 24px;
    width: 22px;
    height: 22px;
    background: #ccc;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

acidjs-xswitch input:checked + span
{
    margin-left: 100%;
    background: #e34c26;
}

acidjs-xswitch input:checked + span::before
{
    content: attr(data-label-on);
    text-align: left;
    color: #e34c26;
}

acidjs-xswitch input:disabled + span
{
    opacity: .5;
}

acidjs-xswitch input:disabled + span::before
{
    display: none;
}

acidjs-xswitch[enabled="false"]
{
    border-color: #ccc;
}

acidjs-xswitch[enabled="false"] label
{
    cursor: no-drop;
}

acidjs-xswitch[visible]
{
    visibility: visible;
}