PrizmDoc Viewer v13.14 - Updated
API Reference / E-Signature Controls / Module: button-set
In This Topic
    Module: button-set
    In This Topic

    Module: button-set

    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

    Members

    (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:
    • module:event-store~off

    on :module:event-store~on

    Registers an event handler on the button set.

    Type:
    • module:event-store~on

    Methods

    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

    Documentation generated by JSDoc 3.5.5 on Fri Sep 04 2020 06:11:54 GMT-0400 (Eastern Daylight Time)