Last change: September 20, 2019

Current version: 1.0.1

The module groupButtons changes a selection of DOM elements into group buttons. Based on a given Webanizr variabele only on of the elements in the selection can be "selected" at any given time.

syntax

 webanizr.collect('groupButtons', parameters, callback);

parameters

The groupButtons module accepts the following parameters:

query__selector (required)

The query selector defining which DOM elements are in this group.

varname__selection (required)

The variabele name used to indicate which of the elements is selected

type__selection (optional)

The way the module determines which element is currently selected. At this point, only one option is supported:

• numeric: 1 means the first element is selected, 2 means the second element is selected, etc.

If this parameter is not set, numeric selection will be used.

type__display (optional)

The way the module displays selected and not-selected elements:

• class: the module gives the selected node a different class then the not selected nodes
• hidden: the module hides all not selected nodes

If this paramaters is not set, the class method is used.

selected__node (optional)

The currently selected node. Eg. when numeric selection is used; setting this value to 2 means the second node is selected.

class__selected (optional for the class display option)

The name of the class that is applied to the selected node. If this parameter is not set, the class "selected" is used.

class__notselected (optional for the class display option)

The name of the class that is applied to the not selected nodes. If this parameter is not set, the not selected nodes do not get a class.

event__trigger (optional)

The event that has to occur at a node to make it selected. Eg. setting this paramater to "click" means that a click on the node selects it.

callback

The callback is called after the nodes have been turned into a button group. The callback function is called with empty data.

demo

Using the groupButtons plugin to create a tab structure:

https://cdn.cpmodules.webanizr.com/demo/group-buttons/index.html

Changelog

• September 20, 2019: 1.0.0 - changed requirement of domEvent to 1.3.0