ApToggleSwitch

ApToggleSwitch is a component that turns a checkbox into a more efficient component, especially on touch devices. It is inspired by HTC Sense interface, written as simple jQuery plugin and completely based on CSS3 that it ready for any resolutions (»Retina-ready«).

1. Examples
2. License and Download
3. How to use
4. Options
5. API
6. Themes
7. Changelog
8. FAQ

Examples

Default CB:

Toggle Switch:

No transitions:

$('#cb2').apToggleSwitch();

$('#cb3').apToggleSwitch({
    transitions: false
});

Theme 'dark':

Theme 'dark-alternative':

$('#cb4').apToggleSwitch({
    activeBorder: true,
    uppercase: false,
    theme: 'dark'
});

$('#cb5').apToggleSwitch({
    activeBorder: true,
    uppercase: false,
    theme: 'dark-alternative'
});

License and Download

ApToggleSwitch is licensed under MIT license.

The latest source code is available on GitHub.

Direct Download

How to use

Include jQuery (e.g. from Google CDN), JS and CSS:

<!-- Add jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

<!-- Add ApToggleSwitch -->
<link rel="stylesheet" type="text/css" href="css/ap-toggle-switch.css" media="screen" />
<script src="js/ap-toggle-switch.0.1.min.js"></script>

Or you use the minified versions which saves bandwidth – ~20KB vs. 13KB:

<!-- Add ApToggleSwitch -->
<link rel="stylesheet" type="text/css" href="css/ap-toggle-switch.min.css" media="screen" />
<script src="js/ap-toggle-switch.0.1.min.js"></script>

Next step ist to insert a new checkbox or to detect that one you want to transform to ApToggleSwitch.

<input type="checkbox" name="cb1" id="cb1" tabindex="1" />

Apply ApToggleSwitch when document is loaded... and TADA! That's all!

<script type="text/javascript">
    $(document).ready(function() {
        $("#cb1").apToggleSwitch();
    });
</script>

Note

If the checkbox has a tabindex this attribute is automatically applied to the ApToggleSwitch control and is removed from checkbox.

If you need access to the ApToggleSwitch control you can access it via ID the following way: adding an ID to the checkbox will generate an prefixed ID ap-toggle-switch-ID for the control – replace ID with your ID.

Options

API

$('#checkboxID').apToggleSwitch('toggle');

$('#checkboxID').apToggleSwitch('on');
// or
$('#checkboxID').apToggleSwitch('yes');

$('#checkboxID').apToggleSwitch('off');
// or
$('#checkboxID').apToggleSwitch('no');

Themes

There are three basic themes right now: default, dark and dark-alternative. But you can easily add you own theme or overwrite the exitant ones. Therefore have a look at ap-toggle-switch.css where you can find the three example themes.

To add your own theme you have to add the following CSS skeleton to your stylesheet and replace NAME with any name. Now you can apply any colors you want to! After you have finished you can apply your theme by setting theme: 'NAME'.

.ap-toggle-switch-NAME {
    /* UI container */
    }

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-left {
        /* Left part of toggle switch, visible when ON */
        }

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-middle:after {
    	/* Middle part of toggle switch, always visible */
    	}

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider > .ap-toggle-switch-right {
        /* Left part of toggle switch, visible when OFF */
        }

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider .on {
        /* text "On" */
        }

    .ap-toggle-switch-NAME > .ap-toggle-switch-slider .off {
        /* text "Off" */
        }

.ap-toggle-switch-NAME.active-border:focus,
.ap-toggle-switch-NAME.active-border:active {
    /* UI container with status focused */
    }

Modifying a theme means to copy the skeleton, set NAME to the corresponding theme name and add the values you wish. Please ensure that the modified CSS is loaded after the default themes!

Changelog

06.03.2014

Initial version

FAQ

Can I use a event listener?

Yes, of course you can add an event listener. But you have to add it to the checkbox! An example:

<input type="checkbox" name="cbX id="cbX" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#cbX")
            .apToggleSwitch()
            .change(function() {
                alert('#cbX changed to ' + $(this).is(':checked'));
            });
    });
</script>

Transistions does not work

Do you use a modern browser that supports CSS transitions? The transitions are not based on JavaScript or jQuery, they are are based on CSS.

The text On/Off does not fit/is too big?

The problem is that the font PT Sans Narrow is not loaded! In ap-toggle-switch.css you can see that the font is imported from Google Fonts so if you computer has no internet access it can not load this font.

For this problem you can add ap-toggle-switch.offline.css and the fonts folder. Please ensure that paths in ap-toggle-switch.offline.css point to the correct fonts, if you use another structure.

Why does the UI element not look as it should?

This component was written for modern browsers that support CSS3 and not old ones like IE6-IE8. There is even no browser detection that disables the script on not supported browser. You have to do that on your own if you like to have such a feature!

Is it possible to modify a theme?

Of course! Have a look at Themes. There you find all necessary information for adding an individual theme or modifying an existant one.