block by eesur bbcd0543cd284ba3c116

d3js | toggle yes no UI buttons

Full Screen

I needed some simple yes/no buttons that could be dropped into a prototype UI.

These toggle boolean yes and no buttons can be added into DOM as reusable UI elements. They can be passed custom click events.

Call the function and pass in container/selection as the argument:

var myButtons = noYesBtns('#some-id');

Optional overrides that can be chained via the api (showing defaults):

nTxt('no') // string for NO button
yTxt('yes') // string for YES button
nBg('grey') // string for unselected background for NO
yBg('grey') // string for unselected bg for YES
nBgActive('green'), // string for selected bg for NO
yBgActive('green'); // string for selected bg for YES

Note: examples in index.html

index.html

d3_code_toggle_yn.js

noYesBtns.css