The GEOSS Discovery And Access Broker APIs
Authors: Fabrizio Papeschi, Mattia Santoro, Stefano Nativi
API version: 1.4.3-beta

ToggleButton

Module: UI

A toggle button with e possible states. When the button switches to 'on', the target element options.targetId becomes visible, otherwise it is hide.

  • Button 'off' (initial state):
  • Button 'on':

  • Button 'disabled':

    For CSS personalization, see the toggle-button class of the API CSS file

  • Constructor

    ToggleButton

    (
    • options
    )

    Parameters:

    • options Object
      • targetId String

        id of the element which toggles from visible to not visible

      • targetSelector String

        selector for the element which toggles from visible to not visible

      • onLabel String

        label of the button in 'on' state

      • offLabel String

        label of the button in 'off' state

      • [beforeStart] Function optional

        callback function to call just before the animation is started

      • [onComplete] Function optional

        callback function to call once the animation is complete

        • [state] Function optional
          the button state
      • [width=135] Integer optional

        button div width

      • [duration=800] Integer optional

        number expressed in milliseconds determining how long the animation will run

      • [id=GIAPI.random()] String optional

        id of the button

    Item Index

    Methods

    css

    (
    • target
    • property
    • value
    )

    Set a CSS property and value for the given target

    Parameters:

    div

    ()

    Returns this button <div>

    setLabel

    (
    • state
    • label
    )

    Set a particular label for the given state

    Parameters:

    • state String

      possible values: 'on','off','disabled'

    • label String

    state

    (
    • state
    )

    Set the button state. Possible values are:

    • 'off'
    • 'on'
    • 'disabled'

    Parameters:

    stateIcon

    ()

    Set the button state icon. Default values are:

    • on: 'fa-angle-double-up'
    • off: 'fa-angle-double-down'