ft-interactive/ig-switches

Name: ig-switches

Owner: FT Interactive News

Description: A simple switch. Nothing fancy.

Created: 2013-11-28 14:17:47.0

Updated: 2014-05-16 17:08:03.0

Pushed: 2014-05-16 17:08:02.0

Homepage: null

Size: 524

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

IG Switches

A simple switch. Nothing fancy. See some examples

update 2013-1-2 0.2.0 : added previous and next state functions, new default style

update 2013-12-3 0.1.1 : For keyboard accessibility switched to use 'buttons' instead of 'divs'. Including nicely styles active and focus states.

Installation

From your project's root directory type

age

basic usage is: 

n't forget to have the switchinput.js file in your HTML document and include the relevant stuff in sass i.e. 'ig-switches/main'

ke some HTML

port styles

@import 'ft-scss-variables/main' @import 'ig-switches/switches';

eate a switch ( passing the id attribute of the DOM element to which the switch should be appended and a set of 2+ states )

var myLovelySwitch = switchInputFactory(

'my-lovely-switch', 
[ 'Bulbasaur', 'Caterpie', 'Pikachu', 'Vulpix', 'Psyduck' ]);

d an event listener to the switch so when it's state is changed you can do something with that information

$(myLovelySwitch).on('state-change', function(){ $('#example-output-2').html('switch set to: ' + this.state); });

ptions

can specify other things when you create your switch in the form of an options object like this

var switchOptions = {

defaultState:"Pikachu",
disabledStates:["Caterpie", "Psyduck"],
activeClass:'my-active-switch-state',
inactiveClass:'my-inactive-switch-state',
disabledClass:'my-disabled-switch-state'

}

var myLovelySwitch = switchInputFactory(

'my-lovely-switch', 
[ 'Bulbasaur', 'Caterpie', 'Pikachu', 'Vulpix', 'Psyduck' ],
switchOptions);

Other methods