Mobile-button NPM

mobile-button

A module of buttons for the mobile web

Getting Started

Install

$ npm install mobile-button --save

Usage and API

Require mobile-button

var MButton = require('mobile-button');

Common API

All buttons have the following methods:

setEl(el:DOMElement): set the button dom element
setF(f:function): set the callback function
bind(): attach all events handlers
unbind(): remove all events handlers

All common options:

el:DOMElement, the button dom element
f:function, the callback function
activeCls:String, the css active class
autobind:Boolean, option to auto bind the button, if el is already available
monotouchable:Boolean, option to create a button a mono touchable element
setActiveCls:Boolean, option to control if the css active class is used or not, default to true

The callback function can return a promise. If so, the button will wait until it's fulfilled to return to an inactive state.

Default Buttons

Default Buttons are contained only in non scrollable elements.

Touchstart Button

A touchstart button triggers his callback on touchstart.

It accepts a delay option.

var btn = new MButton.Touchstart({
    el: myElement,
    f: function () {
        alert('...');
    },
    delay: 500 // in ms
});

Touchend Button

A touchend button triggers his callback on touchend if the finger is in the active zone of the underlying button dom element.

This button accepts a activeBorder option in px.

var btn = new MButton.Touchend({
    el: myElement,
    f: function () {
        alert('...');
    },
    activeBorder: 20 // in px
});

Push Button

A push button triggers the f callback on touchstart and the g callback on touchend or when the finger leaves the active zone of the underlying button dom element. As f and g are chained g always executes after f.

This button accepts a delay and a g function in the options object.

var btn = new MButton.Push({
    el: myElement,
    f: function () {
        alert('f');
    },
    g: function () {
        alert('g');
    },
    delay: 500 // in ms
});

Scrollable Y Buttons

Buttons contained in a Y scrollable element (iscroll or on ios 5+ with -webkit-overflow-scrolling:touch;).

Touchend Button

This touchend button will get canceled if the fingermove more than tolerance pixels in the Y axis. It extends the default touchend button.

This button accepts a tolerance option in px.

var ScrollableBtn = require('mobile-button').ScrollableY;

var btn = new ScrollableBtn.Touchend({
    el: myElement,
    f: function () {
        alert('...');
    },
    tolerance: 5 // in px
});

Scrollable X Buttons

Buttons contained in a X scrollable element (iscroll or on ios 5+ with -webkit-overflow-scrolling:touch;).

Touchend Button

This touchend button will get canceled if the fingermove more than tolerance pixels in the X axis. It extends the default touchend button.

This button accepts a tolerance option in px.

var ScrollableBtn = require('mobile-button').ScrollableX;

var btn = new ScrollableBtn.Touchend({
    el: myElement,
    f: function () {
        alert('...');
    },
    tolerance: 5 // in px
});

Build

to build examples and tests

npm install
npm run build

Examples

Check the examples.

Design taken from @Noxdzine Orange UI kit

Tests

run the tests

ChangeLog

v0.8.1 03-04-2015

fix touchcancel usage #24

v0.8.0 12-15-2014

Add setActiveCls option

v0.7.0 11-09-2014

Add a PushButton which accepts two callback functions.

v0.6.1 10-15-2014

Better handling of exceptions thrown from callback function with Q.done

v0.6.0 09-30-2014

Add monotouchable option

v0.5.0 08-12-2014

Replaced the ClickButton with default, scrollable-x and scrollable-y buttons based on mouse events. The mobile button behavior is now consistent across all platforms, mobile and desktop.