Dropdown Pane JavaScript Reference

Foundation provides JavaScript components for the Dropdown pane as listed below.

Initializing

You can initialize the pane in JavaScript by using foundation.dropdown.js and foundation.core.js plugins. The foundation.core.js plugin requires following libraries −

  • foundation.util.keyboard.js

  • foundation.util.box.js

Foundation.Dropdown

It specifies instance of the dropdown as defined below −

var my_element = new Foundation.Dropdown(element);

The dropdown includes the following events as listed in the table −

Sr.No. Name & Description Type
1

element

It creates a jQuery object into an dropdown.

 jQuery
2

options

It overrides the default plugin settings.

 Object

Plugin Options

You can use the following plugin options to customize the dropdown instance.

Sr.No. Name & Description Example
1

hoverDelay

It specifies the time taken to open a submenu on hover event.

 250
2

hover

It open the submenu on hover events.

 false
3

hoverPane

Does not close dropdown when hovering over the dropdown pane

 true
4

vOffset

It provides number of pixels when you open the dropdown pane and the triggering element.

 1
5

hOffset

It provides number of pixels when you open the dropdown pane and the triggering element.

 1
6

positionClass

It is used to adjust the position when the class is applied to adjust.

 'top'
7

trapFocus

This plugin will trap the focus to the dropdown pane if you open the dropdown with keyboard commands.

 false
8

autoFocus

It is used to set the focus on the element on the pane.

 true

Events

Dropdown pane provides the following events as listed in the table −

Sr.No. Name & Description
1

closeme.zf.dropdown

It is used to close the other open dropdowns.
2

show.zf.dropdown

It shows the dropdown pane when it is visible.

Functions

The Dropdown pane provides the following functions as listed below −

  • .getPositionClass − It specifies the current position of the dropdown pane.

  • .open − It shows the dropdown pane and fires to close other dropdowns by using bubbling event.

  • .close − It closes the open dropdown pane.

  • .toggle − It toggles the dropdown pane.

  • .destroy − It destroys the dropdown pane.

foundation_containers.htm
Advertisements