A set of UI buttons that interact as one group. The Button Set supports two modes: toggling the buttons between the on and off state, as well as toggling through an arbitrary list of ordered values.
In the on/off mode, each button will be turned to on when clicked. When one button is selected, it turns all other buttons that are in the on state to off.
In the arbitrary toggle mode, each button will cycle through its own toggle values. When one button is selected, it will remove the active toggle value from any other button that currently has one. Those buttons will be reset, and begin the cycle at the first toggle value the next time they are clicked.
Examples
<!-- In this example, the buttons toggle on and off -->
<!--The following HTML includes a couple button set components with the same data-pcc-name
so that they are included in the same set. An element is specified as a button set by setting
the data-pcc-component attribute to "buttonset".-->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="InitialsTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-initials"></span>
<label>Initials</label>
</button>
<!-- In this example, the buttons toggle among arbitrary values -->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
data-pcc-toggle="on,sticky"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
// Require the button set module.
var ButtonSet = require('../elements/button-set.js');
var mySet;
// Pass each button set element to the button set module to initialize each button.
// parent is the element that contains the button set elements.
$(parent).find('[data-pcc-component="buttonset"]').each(function() {
// ButtonSet will return the entire set of buttons that have been added
// using the same 'data-pcc-name' value
mySet = ButtonSet(this);
});
mySet.on('change', function(ev, data) {
// data about the buttonset
console.log(data);
});
(require("button-set"))(el) → {HTMLElement}
Parses and initializes a button set.
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement |
The parent element in which to parse for the button set component. |
Returns:
The parsed button set element.
- Type
- HTMLElement
Examples
<!-- In this example, the buttons toggle on and off -->
<!--The following HTML includes a couple button set components with the same data-pcc-name
so that they are included in the same set. An element is specified as a button set by setting
the data-pcc-component attribute to "buttonset".-->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="InitialsTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-initials"></span>
<label>Initials</label>
</button>
<!-- In this example, the buttons toggle among arbitrary values -->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
data-pcc-toggle="on,sticky"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
// Require the button set module.
var ButtonSet = require('../elements/button-set.js');
var mySet;
// Pass each button set element to the button set module to initialize each button.
// parent is the element that contains the button set elements.
$(parent).find('[data-pcc-component="buttonset"]').each(function() {
// ButtonSet will return the entire set of buttons that have been added
// using the same 'data-pcc-name' value
mySet = ButtonSet(this);
});
mySet.on('change', function(ev, data) {
// data about the buttonset
console.log(data);
});
Examples
<!-- In this example, the buttons toggle on and off -->
<!--The following HTML includes a couple button set components with the same data-pcc-name
so that they are included in the same set. An element is specified as a button set by setting
the data-pcc-component attribute to "buttonset".-->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="InitialsTemplate"
class="pcc-button">
<span data-pcc-icon="pcc-icon-initials"></span>
<label>Initials</label>
</button>
<!-- In this example, the buttons toggle among arbitrary values -->
<button data-pcc-component="buttonset"
data-pcc-name="mousetools"
data-pcc-value="SignatureTemplate"
data-pcc-toggle="on,sticky"
class="pcc-button">
<span data-pcc-icon="pcc-icon-signature"></span>
<label>Signature</label>
</button>
// Require the button set module.
var ButtonSet = require('../elements/button-set.js');
var mySet;
// Pass each button set element to the button set module to initialize each button.
// parent is the element that contains the button set elements.
$(parent).find('[data-pcc-component="buttonset"]').each(function() {
// ButtonSet will return the entire set of buttons that have been added
// using the same 'data-pcc-name' value
mySet = ButtonSet(this);
});
mySet.on('change', function(ev, data) {
// data about the buttonset
console.log(data);
});
(require("button-set"))(el) → {HTMLElement}
Parses and initializes a button set.
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement |
The parent element in which to parse for the button set component. |
Returns:
The parsed button set element.
- Type
- HTMLElement
(require("button-set"))(el) → {HTMLElement}
Parses and initializes a button set.
Parameters:
| Name | Type | Description |
|---|---|---|
el |
HTMLElement |
The parent element in which to parse for the button set component. |
Returns:
The parsed button set element.
- Type
- HTMLElement
Members
(static) pccElements :Object
The button elements in the button set.
Type:
- Object
(static) pccElements :Object
The button elements in the button set.
Type:
- Object
(static) pccElements :Object
The button elements in the button set.
Type:
- Object
off :module:event-store~off
Removes an event handler from the button set.
Type:
off :module:event-store~off
Removes an event handler from the button set.
Type:
off :module:event-store~off
Removes an event handler from the button set.
Type:
on :module:event-store~on
Registers an event handler on the button set.
Type:
on :module:event-store~on
Registers an event handler on the button set.
Type:
on :module:event-store~on
Registers an event handler on the button set.
Type:
Methods
destroy()
Destroys the button set component.
destroy()
Destroys the button set component.
destroy()
Destroys the button set component.
value(val) → {Object}
Gets or sets the value of the button set. The values are specified in the HTML for each button using the data-pcc-value attribute.
Parameters:
| Name | Type | Description |
|---|---|---|
val |
string |
The value of the button to make active. |
Returns:
The button set element if a value is passed. Otherwise, the current value is returned.
- Type
- Object
value(val) → {Object}
Gets or sets the value of the button set. The values are specified in the HTML for each button using the data-pcc-value attribute.
Parameters:
| Name | Type | Description |
|---|---|---|
val |
string |
The value of the button to make active. |
Returns:
The button set element if a value is passed. Otherwise, the current value is returned.
- Type
- Object
value(val) → {Object}
Gets or sets the value of the button set. The values are specified in the HTML for each button using the data-pcc-value attribute.
Parameters:
| Name | Type | Description |
|---|---|---|
val |
string |
The value of the button to make active. |
Returns:
The button set element if a value is passed. Otherwise, the current value is returned.
- Type
- Object