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:

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

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:

  • "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!

Advertisements

One comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s