{{>api-button}}

Screenshot of multiple ITSACheckbox widgets {{description}}

{{>getting-started}}

Description

Y.ITSACheckbox represents a html-checkbox with a layout of a slider (iOS style). It can be created from script, or using progressive enhancement. Both ways will have a hidden html-checkbox that can be send through a from using serialization.

Purecss compatable

Y.ITSACheckbox is purecss compatable. It behaves responsive, just like a normal html-checkbox. It comes with its own style, if you want pure-behaviour, just use purecss.

Custom styling

The appearance of an ITSACheckbox-instance can be customized by three ways:

  1. option-labels
    set with the attributes 'optionon' and 'optionoff'.
  2. size
    determined by the fontsize of the widget's boudingBox, preferred set by className to the boundingBox or one of its ancestors.
  3. color
    the default color is determined by these css-rules: ``` ``` you can overide these default colors by creating your custom css-rules and add the className to an ancestor-node, or the boundingBox-node

    example css for an ancestor-node: ``` ``` example css for a boundingBox-node: ``` ```

Progressive enhancement v.s. javascript

When using progressive enhancement (by sepcifying the attribute scrNode), you best add a classname to the html-checkbox to make it hidden before the widget is rendered. If you don't then the widget will hide the html-element for you, but it will be seen on the screen for a short time. See the examples on how to do this.

When using no srcNode, the widget will generate an invisible html-checkbox as well. This is useful in case you have a form that submits its elements. Since this is a new element, its id is defined as boudingBox.get('id')+'_checkbox'.

Usage

Create ITSACheckbox through javascript

```
```

Create ITSACheckbox using a html-element

``` ```

Custom styling

```
```

Notes

Never wrap the checkbox by a label-element! ITSACheckBox renderes a widget and it is invalid HTML to have nodes -other than a input-element inside a label-element. It also will lead to unexpected behaviour when clicking on the widget.

In case you use progressive enhancement (rendering using srcNode), the widget will take care of being rendered outside any label-element by itself.

Known issues

You cannot render the widget when it lies inside a container-node that has the css display: none;. This is because the widget renderes by calculating sizes. Never hide a containernode using display: none;, but by setting it out of the view:

```css .container.hidden { position: absolute !important; visibility: hidden !important; left: -9999px !important; top: -9999px !important; } ```

Should you change the font-size, then the widget needs to be re-rendered to fit its sizes. The best way to do this is by fireing the event: Y.fire('rerenderCheckbox'), because all ITSACheckbox instances are listening to this event and will rerender when this event occurs.

licence

Copyright (c) 2014 Its Asbreuk
Copyright (c) 2014 YUI BSD License