Flip Switcher HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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]

thumb

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:

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!

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov