Versions Compared

Old Version 5

changes.mady.by.user Bri Prebilic Cole

Saved on

compared with

New Version 6

changes.mady.by.user Bri Prebilic Cole

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Example UsageArgumentsReturn Value
var button = bns.button(div, id, gid, cb, tooltip);

div - d3 selection of the div that the button will be in

id - globally unique button ID string

gid - the glyph ID string to be used for the button

cb - a function reference to be executed when the button is clicked

tooltip - (optional) string of tooltip to appear on hover

creates a button with the given information

returns an object with an API (see below)

Returned API Example UsageArgumentsReturn Value
button.id; *none

string that is the ID of the button

button.width();nonenumber that is the width of the button plus padding (in pixels)

...

Example UsageArgumentsReturn Value
var toggle = bns.toggle(div, id, gid, initState, cb, tooltip);

div - d3 selection of the div that the toggle will be in

id - globally unique toggle ID string

gid - the glyph ID string to be used for the toggle

initState - whether the toggle should be "selected" or "unselected" to begin with. Truthy values will be active and falsy values will be inactive.

cb - a function reference to be executed when the toggle is clicked. This callback ("cb") function should take an argument of the selected state of the button.

tooltip - (optional) string of tooltip to appear on hover

creates a toggle with the given information

Returned API Example UsageArgumentsReturn Value
toggle.id *nonestring that is the ID of the toggle
toggle.width();nonenumber that is the width of the toggle plus padding (in pixels)
toggle.selected();none

boolean of the state of the toggle

true - toggle is selected

false - toggle is unselected

toggle.toggle();

none

this toggles the state of the button and executes cb with the selected state
toggle.toggleNoCb();nonetoggles the state of the button but does not execute cb

...

Example UsageArgumentsReturn Value
var radioSet = radioSet(div, id, rset);

div - d3 selection of the div that the radio button set will be in

id - globally unique radio set ID string

rset - an array of objects.* Each object represents one radio button and should have the following members:

gid - the glyph ID string to be used for the button

cb - a function reference to be executed when this button is selected. The function can take two arguments - first, the array index of the button, and second the key.

tooltip - (optional) string of tooltip to appear on hover

key - (optional) a unique identifier for this button. If key is not given, then the array index of this object will be used instead.

creates a radio button set

returns an object with an API (see below)

Returned API Example UsageArgumentsReturn Value
radioSet.width();nonereturns the width of the entire radio button set plus padding
radioSet.selected(x);

getter / setter function

undefined - if no argument is given, then the selected radio button's key (if it exists) or index is returned

x - selects the radio button with the specified key or index and invokes the corresponding cb

selected radio button's key or index if called with no arguments

radioSet.selectedIndex(x);

getter / setter function

undefined - if no argument is given, then the selected radio button's index is returned

x - selects the radio button with the specified index and invokes the corresponding cb

selected radio button's index if called with no arguments

...