wuiButtonBehavior

What it is

wuiButtonBehavior is a behavior made for WizUI. It behaves like an HTML5 button would be expected to. Setting the behavior to a WuiDom would make it able to listen for various events.

wuiButtonBehavior will attach methods and events to the WuiDom element;

var button = new WuiDom('div');
wuiButtonBehavior(button);

See the full example at the end of the file

Methods

enable

The enable method can be called to enable tap interaction.

function Button() {
    WuiDom.call(this);
    wuiButtonBehavior(this);
}

disable

The disable method can be called to prevent tap interaction on the element.

button.disable();

tap

The tap method will trigger the a successful cycle of tap events.

Events

tap

This event occurs when a successful tap by the user happened. Most likely used to trigger action.

tapstart

This event occurs when the user first presses the WuiDom. Most likely used for design purpose.

tapend

This event occurs when the user release the WuiDom he was pressing or when the tap got cancelled. It receives a boolean as parameter which will be set to true if the tap has been cancelled. Most likely used for design purpose.

enabled

The enabled event is called when the tap behavior is enabled, such as by the enable method.

disabled

The disabled event is called when the tap behavior is disabled, such as by the disable method.

How to use

See the example below:

var inherits = require('util').inherits;
var WuiDom = require('WuiDom');
var wuiButtonBehavior = require('wuiButtonBehavior');

function Button(label) {
    WuiDom.call(this, 'div', { text: label, className: 'button' });
    wuiButtonBehavior(this);

    this.on('tapstart', function () {
        this.addClassNames('pressed');
    });

    this.on('tapend', function () {
        this.delClassNames('pressed');
    });

    this.on('disabled', function () {
        this.addClassNames('disabled');
    });

    this.on('enabled', function () {
        this.delClassNames('disabled');
    });
}

inherits(Button, WuiDom);

var button = new Button('My Button');

button.on('tap', function () {
    doSomething();
});