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;
}