https://github.com/jsantell/button

A UI on/off button component
https://github.com/jsantell/button

Last synced: about 1 month ago
JSON representation

A UI on/off button component

• Host: GitHub
• URL: https://github.com/jsantell/button
• Owner: jsantell
• License: mit
• Created: 2013-01-27T19:38:08.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-07-07T21:46:03.000Z (over 11 years ago)
• Last Synced: 2024-10-16T05:44:48.252Z (3 months ago)
• Language: JavaScript
• Homepage: http://jsantell.github.com/button
• Size: 111 KB
• Stars: 2
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
button

====

A UI on/off button component for use with [component](https://github.com/component/component). Bind to an input field and turn it into a sleek button.

Tested in Chrome, Firefox, Safari, Opera, IE9+

Styles inspired by [Hugh Giraudel](http://tympanus.net/Tutorials/CSS3ButtonSwitches/index.html)

[Check out the related dial component](http://jsantell.github.com/dial)

[View Example](http://jsantell.github.com/button)

## Installation

```

component install jsantell/button

```

## API

### new Button(inputEl, [on])

Create a new button instance, linked to `inputEl`. On status is determined by the checked state of the input, or you may pass in a boolean `on` to set the initial state. On instantiation, the button is rendered, original checkbox hidden, and events bound.

```js

var Button = require('button');

var input = document.getElementById('inputEl');

var button = new Button(input, true);

```

### Button#set(val)

Sets button to either on or off based off of `val`'s truthiness.

### Button#render()

Reconstructs the button's `el` property containing the button element. Already called during instantiation.

### Button#bind()

Binds events necessary for the button on the button element, as well as the input element.

### Button#unbind()

Unbinds the events related to the button.

### Button#hideInput()

Hides the corresponding input field. Already called on instantiation.

### Button#showInput()

Displays the corresponding input field. Called on destroy, or call it manually to display the element.

### Button#destroy()

Destroys the button element, reveals original input element and unbinds button events

## Events

Button inherits from [Emitter](https://github.com/component/emitter), so all emitter methods apply. By default, only a `change` event is fired when the button's value changes, which can be hooked into via:

```js

var button = new Button(input);

button.on('change', function (val) {

  console.log('Is button on? ' + val);

});

```