PUSHBUTT

chainable toggle button widget based on @substack's slideways

Simple example

var PushButt = require('../.')

var result = document.querySelector('#result')
  , count = 0
  , butt = PushButt({ title: 'butts' })

butt.appendTo('#button')
butt.addToggleGroup('groupA')
butt.on(butt.event, function (id) {
    result.innerHTML = "" + count++
})

Multi-Toggle Group Example

example

var PushButt = require('../.')

var result = document.querySelector('#result')
  , button = document.querySelector('#button')
  , buttonGroup = []
  , butt, text, i

/*
 * Build 5 buttons in a toggle group
 */
for (i = 0; i < 5; i++) {
  butt = PushButt({ title: 'button-' + i })
  butt.appendTo(button)
  butt.addToggleGroup('groupA')
  butt.on(butt.event, callback)
  buttonGroup[i] = butt
}
/*
 * Remove 5th button from group
 */
buttonGroup[4].removeToggleGroup('groupA')

button.appendChild(document.createElement('br'))
button.appendChild(document.createElement('br'))
/*
 * Build another 5 toggle group
 */
for (i = 5; i < 10; i++) {
  butt = PushButt({ title: 'button-' + i })
  butt.appendTo(button)
  butt.addToggleGroup('groupB')
  butt.on(butt.event, callback )

  buttonGroup[i] = butt
}
/*
 * Remove 10th button
 */
buttonGroup[9].removeToggleGroup('groupB')


function callback (id) {
  result.innerHTML = "Caught " + id
}

Methods

var butt = PushButt(opts)

Returns a push button instance using options opts. Available options are:

{
  "active": true || false
, "title": "Button Text Here"
}

butt.appendTo(target)

Append the button widget to the dom element or query selector string target.

butt.set(arg)

If arg is a "bool" this method programmatically toggles the value of the button, true sets button into on state, false sets button into off state. If arg is a "string" the set method sets the displayed title of the button.

butt.addToggleGroup(groupname)

Adds the button butt to the group groupname. This turns the buttons into a radiobutton like mode, where one and only one button within the group can be active at any time. Setting a new button deactives the active button.

butt.removeToggleGroup(groupname)

Removes the button butt from the group groupname.

Events

butt.on(butt.event, function (id) {})

Every time a button becomes active it emits event butt.event which is a unique ID for that button. The event value is the numberic id of the button.

Attributes

butt.element

html dom element container

butt.id

The numeric ID of the button

butt.event

The emitted event name on button press. Set to 'pushbutt-' + butt.id

butt.title

The title of the button

install

With npm do:

npm install slideways

Use browserify to require('slideways').

license

MIT