Events

Event binding

jQuery event binding

Navegante events uses jQuery standard methods structure.

You can use .on(), .off() and .one().

Event names are namespaced with /* eventName */.navegante

// Please, substitute /* eventName */ with the name of the event

// jQuery .on()
$('#my-navegante').on('/* eventName */.navegante', ( event, /* params */ ) => {
    console.log('An event just happened')
})

// jQuery .one()
$('#my-navegante').one('/* eventName */.navegante', ( event, /* params */ ) => {
    console.log('An event just happened once!')
})

// jQuery .off()
$('#my-navegante').on('/* eventName */.navegante', ( event, /* params */ ) => {
    console.log('An event have just been removed!')
})

Vanilla Javascript event binding

Bind the events in Vanilla Javascript with the events .on(), .off() and .once().

In Vanilla Javascript is not necessary to namespace the event. Just use the name.

// Please, substitute /* eventName */ with the name of the event

const navegante = new Navegante('#my-navegante')

// .on()
navegante.on('/* eventName */', ( /* params */ ) => {
    console.log('An event just happened')
})

// .once()
navegante.once('/* eventName */', ( /* params */ ) => {
    console.log('An event just happened once!')
})

// .off()
navegante.on('/* eventName */', ( /* params */ ) => {
    console.log('An event have just been removed!')
})

Events demo

Interact with this accordion to see how events are triggered

Events

open

Fired when a group has been fully opened

// jQuery
$navegante.on('open.navegante', ( event, naveganteGroupInstance ) => {
    console.log(naveganteGroupInstance)
})

// vanilla Javascript
navegante.on('open', naveganteGroupInstance => {
    console.log(naveganteGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteGroupInstance Group Group instance that has been fully opened

close

Fired when a group has been fully closed

// jQuery
$navegante.on('close.navegante', ( event, naveganteGroupInstance ) => {
    console.log(naveganteGroupInstance)
})

// vanilla Javascript
navegante.on('close', naveganteGroupInstance => {
    console.log(naveganteGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteGroupInstance Group Group instance that has been fully closed

toggle

Fired when a group has been fully toggled.

Both open and close events are listened.

// jQuery
$navegante.on('toggle.navegante', ( event, naveganteGroupInstance ) => {
    console.log(naveganteGroupInstance)
})

// vanilla Javascript
navegante.on('toggle', naveganteGroupInstance => {
    console.log(naveganteGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteGroupInstance Group Group instance that has been fully toggled

animation

Fired when the animation of the target of a group has been fully completed

// jQuery
$navegante.on('animation.navegante', ( event, naveganteGroupInstance ) => {
    console.log(naveganteGroupInstance)
})

// vanilla Javascript
navegante.on('animation', naveganteGroupInstance => {
    console.log(naveganteGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteGroupInstance Group Group instance that the animation of the target of a group has been fully completed

close-outside

Fired when the user clicks outside of the nav and close all active groups automatically.

// jQuery
$navegante.on('close-outside.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('close-outside', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

close-navegantes

Fired when there are multiple Navegante instances and one of them is closed by an action of one of the other Navegante.

// jQuery
$navegante.on('close-navegantes.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('close-navegantes', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

refresh

// jQuery
$navegante.on('refresh.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('refresh', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

enable

Fired when the nav is disabled and has just has been enabled

// jQuery
$navegante.on('enable.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('enable', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

disable

Fired when the nav is enabled and has just has been disabled

// jQuery
$navegante.on('disable.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('disable', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

destroy

Fired when the accordion has just been destroyed

// jQuery
$navegante.on('destroy.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('destroy', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

Responsive

open-nav

Fired when the responsive nav has been opened

// jQuery
$navegante.on('open-nav.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('open-nav', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance

close-nav

Fired when the responsive nav has been closed

// jQuery
$navegante.on('close-nav.navegante', ( event, naveganteInstance ) => {
    console.log(naveganteInstance)
})

// vanilla Javascript
navegante.on('close-nav', naveganteInstance => {
    console.log(naveganteInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
naveganteInstance Navegante Navegante instance