下拉菜單面板 JavaScript 參考

上一頁
下一頁

Foundation 提供以下列出的下拉菜單面板的 JavaScript 元件。

初始化

您可以使用 foundation.dropdown.js 和 foundation.core.js 外掛在 JavaScript 中初始化面板。foundation.core.js 外掛需要以下庫 -

  • foundation.util.keyboard.js

  • foundation.util.box.js

Foundation.Dropdown

它指定如下定義的下拉選單例項 -

var my_element = new Foundation.Dropdown(element);

下拉選單包含以下事件，如表中所列 -

序號 名稱和描述 型別
1

元素

它建立一個 jQuery 物件到下拉選單中。

 jQuery
2

選項

它覆蓋預設的外掛設定。

 物件

外掛選項

您可以使用以下外掛選項來自定義下拉選單例項。

序號 名稱和描述 示例
1

hoverDelay

它指定在懸停事件上開啟子選單所需的時間。

 250
2

hover

它在懸停事件上開啟子選單。

 false
3

hoverPane

當滑鼠懸停在下拉菜單面板上時不會關閉下拉選單

 true
4

vOffset

當您開啟下拉菜單面板和觸發元素時，它提供畫素數。

 1
5

hOffset

當您開啟下拉菜單面板和觸發元素時，它提供畫素數。

 1
6

positionClass

它用於在應用類以進行調整時調整位置。

 'top'
7

trapFocus

如果您使用鍵盤命令開啟下拉選單，此外掛會將焦點鎖定到下拉菜單面板。

 false
8

autoFocus

它用於將焦點設定到面板上的元素。

 true

事件

下拉菜單面板提供以下事件，如表中所列 -

序號 名稱和描述
1

closeme.zf.dropdown

它用於關閉其他開啟的下拉選單。
2

show.zf.dropdown

當下拉菜單面板可見時，它顯示下拉菜單面板。

函式

下拉菜單面板提供以下函式，如下所示 -

  • .getPositionClass - 它指定下拉菜單面板的當前位置。

  • .open - 它顯示下拉菜單面板並觸發透過冒泡事件關閉其他下拉選單。

  • .close - 它關閉開啟的下拉菜單面板。

  • .toggle - 它切換下拉菜單面板。

  • .destroy - 它銷燬下拉菜單面板。

foundation_containers.htm
列印頁面
上一頁
下一頁
廣告