Flip Switcher HTML5 Web Component

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:

[sourcecode language=”html”]
<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>
[/sourcecode]

HTML Attributes of the <acidjs-xswitch&gt</acidjs-xswitch&gt Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• "acidjs-xswitch-mode-change" – Triggered when the switcher is clicked, and returning the new selected state of the components as an object:
  $("#switch-01").on("acidjs-xswitch-mode-change", function(e, data) {
window.console.log(e.type, data); // {selected: true // false|true}
});

JavaScript Methods of the <acidjs-xswitch></acidjs-xswitch> Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. On it you will also find a download link. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website. You may also want check this blog post to learn how to create this type of flip switches with pure CSS.

Have a great weekend!