Drop.js-實用的JavaScript下拉彈出層插件

Drop.js是一款JavaScript和CSS實用下拉彈出層插件。該插件基于Tether.js來定位彈出層，可以制作多種彈出層效果。它的特點還有：

• 彈出層會在頁面尺寸改變和滾動時自動更新位置。

• 彈出層在頁面滾動時使用GPU加速來定位。

• 彈出層之間可以進行嵌套。

• 彈出層可以在元素的12個位置上顯示。

• 可以自定義是在點擊元素、鼠標滑過元素或元素聚焦時顯示彈出層。

使用方法

由于該彈出層插件依賴于tether.js插件，使用該彈出層插件需要在頁面中引入tether.min.js、drop.min.js和drop-theme-arrows.css文件。

初始化插件

要初始化一個drop，需要實例化一個Drop對象。

drop = new Drop({
  target: document.querySelector('.drop-target'),
  content: '** to the future!',
  position: 'bottom left',
  openOn: 'click'
});

你也可以通過自定義“上下文”來創建Drops，在“上下文”中你可以指定彈出層的CSS前綴字符串，默認的前綴是drop。

MyDropContext = Drop.createContext({
  classPrefix: 'my-drop'
});
drop = new MyDropContext({
  target: document.querySelector('.my-drop-target'),
  content: '** to my new Drop context!'
});

在上面的實例化代碼中，所有彈出層會通過my-drop-open和my-drop-content來進行渲染，而不是drop-open和drop-content。另外，所有通過data-drop來設置的屬性現在都會被替換為通過data-my-drop來設置。

配置參數

下面的參數可以在drop構造函數中使用。

• target：打開彈出層的目標元素。
• content：彈出層顯示的內容。可以是：

如果該參數沒有設置，默認為目標元素的data-${classPrefix}(通常是data-drop)屬性的值。

• position：彈出層的顯示位置，可以是：

如果該參數沒有設置，默認為目標元素的data-${classPrefix}-position(通常是data-drop-position)屬性的值。

• openOn：指定觸發彈出層的事件。如果該參數設置為undefined或null，你需要手動管理drop實例的open()和close()方法。設置為'always'可以在彈出層渲染之后立刻打開。可用的值有：

如果該參數沒有設置，默認為目標元素的data-${classPrefix}-openOn(通常是data-drop-openOn)屬性的值。

• constrainToWindow：rugged設置為true，將使用Tether插件的容器列表來在元素超出視口時翻轉元素。這會使得原來在下方的彈出層翻轉到元素的上方。
• constrainToScrollParent：Similar to constrainToWindow but for the target element's first scroll parent: the first parent that has overflow: auto or overflow: scroll set, or the body, whichever comes first.
• classes：為彈出層添加額外的class類。
• remove：如果設置為true，在關閉彈出層時將它從DOM中移除，再次打開時重新渲染。
• beforeClose：關閉彈出層前觸發的回調函數。如果函數返回false，將不會關閉彈出層。
• hoverOpenDelay：在mouseover之后打開彈出層的延遲時間，單位毫秒。
• hoverCloseDelay：在mouseout之后關閉彈出層的延遲時間，單位毫秒。
• focusDelay：在focus之后打開彈出層的延遲時間，單位毫秒。
• blurDelay：在blur之后關閉彈出層的延遲時間，單位毫秒。
• openDelay：同時設置hoverOpenDelay和focusDelay。
• closeDelay：同時設置hoverCloseDelay和blurDelay。

默認的參數值為：

defaultOptions =
    position: 'bottom left'
    openOn: 'click'
    constrainToWindow: true
    constrainToScrollParent: true
    classes: ''
    hoverOpenDelay: 0
    hoverCloseDelay: 50
    focusDelay: 0
    blurDelay: 50
    tetherOptions: {}

方法

下面的方法都可以通過Drop對象實例來調用。

• open()：打開一個彈出層。會為彈出層添加drop-open class。
• close()：關閉一個彈出層。會關閉彈出層的drop-open class。被關閉的彈出層仍然在DOM中。
• remove()：從DOM中移除彈出層。
• toggle()：切換彈出層。
• isOpened()：如果彈出層是打開狀態返回true。
• position()：重新定位彈出層。
• destroy()：銷毀彈出層和移除所有的事件。

事件

drop實例有以下一些可用綁定的事件。

• on(eventName, handler, [ctx])
• off(eventName, [handler])
• once(eventName, handelr, [ctx])

可觸發的事件有：

• open
• close

drop彈出層插件的github地址為： http://github.hubspot.com/drop/

來源：jQuery之家