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
forked from eesur's block: d3js | toggle yes no UI buttons
xxxxxxxxxx
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font-family: Consolas, monaco, monospace;
font-size: 14px;
width: 400px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 18px;
font-weight: normal;
}
section {
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
#q3 button.ny-btn {
font-size: 72px;
}
</style>
<!-- css for reusable d3 buttons -->
<link rel="stylesheet" href="noYesBtns.css">
</head>
<body>
<header>
<h1>Toggle reusable boolean buttons:</h1>
</header>
<section id="q1"></section>
<section id="q2"></section>
<section id="q3"></section>
<footer>Feedback: <span id="feedback"></span> </footer>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- js for reusable d3 buttons -->
<script src="d3_code_toggle_yn.js" charset="utf-8"></script>
<script>
var q1 = noYesBtns('#q1')
.on('_click', function () {
d3.select('#feedback').text('just selected: ' + this.firstChild.data);
})
.render();
var q2 = noYesBtns('#q2')
.nTxt('false')
.yTxt('true')
.on('_click', function () {
d3.select(this).style('background', '#FDBB30');
d3.select('#feedback').text('just selected: ' + this.firstChild.data);
})
.render();
var q3 = noYesBtns('#q3')
.nTxt('0')
.yTxt('1')
.on('_click', function () {
d3.select('#feedback').text('just selected: ' + this.firstChild.data);
})
.render();
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js