当前位置：首页 > 网页特效 > 弹出层

Drop.js-实用的JavaScript下拉弹出层插件

分类：弹出层日期：2024-05-14 点击(0) 评论(0)

简介

Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层，可以制作多种弹出层效果。它的特点还有：

- 弹出层会在页面尺寸改变和滚动时自动更新位置。
- 弹出层在页面滚动时使用GPU加速来定位。
- 弹出层之间可以进行嵌套。
- 弹出层可以在元素的12个位置上显示。
- 可以自定义是在点击元素、鼠标滑过元素或元素聚焦时显示弹出层。
####  使用方法

------------

由于该弹出层插件依赖于tether.js插件，使用该弹出层插件需要在页面中引入tether.min.js、drop.min.js和drop-theme-arrows.css文件。
```html
<link rel="stylesheet" href="drop-theme-arrows.css" />
<script src="tether.min.js"></script>
<script src="drop.min.js"></script>    
```
#### 初始化插件 
要初始化一个drop，需要实例化一个Drop对象。

```html
drop = new Drop({
  target: document.querySelector('.drop-target'),
  content: 'Welcome to the future!',
  position: 'bottom left',
  openOn: 'click'
});
```
你也可以通过自定义“上下文”来创建Drops，在“上下文”中你可以指定弹出层的CSS前缀字符串，默认的前缀是drop。

```html
MyDropContext = Drop.createContext({
  classPrefix: 'my-drop'
});
drop = new MyDropContext({
  target: document.querySelector('.my-drop-target'),
  content: 'Welcome to my new Drop context!'
});
```
在上面的实例化代码中，所有弹出层会通过my-drop-open和my-drop-content来进行渲染，而不是drop-open和drop-content。另外，所有通过data-drop来设置的属性现在都会被替换为通过data-my-drop来设置。

####  配置参数

------------

下面的参数可以在drop构造函数中使用。

- target：打开弹出层的目标元素。
- content：弹出层显示的内容。可以是：
1. 一个DOM元素
2. HTML字符串
3. 一个返回HTML字符串或DOM元素的函数。content()会在每次弹出层打开时都被调用。
如果该参数没有设置，默认为目标元素的data-${classPrefix}（通常是data-drop）属性的值。

- position：弹出层的显示位置，可以是：
1. 'top left'
2. 'left top'
3. 'left middle'
4. 'left bottom'
5. 'bottom left'
6. 'bottom center'
7. 'bottom right'
8. 'right bottom'
9. 'right middle'
10. 'right top'
11. 'top right'
12. 'top center'
如果该参数没有设置，默认为目标元素的data-${classPrefix}-position（通常是data-drop-position）属性的值。

openOn：指定触发弹出层的事件。如果该参数设置为undefined或null，你需要手动管理drop实例的open()和close()方法。设置为'always'可以在弹出层渲染之后立刻打开。可用的值有：
'click'
'hover'
'focus'
'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。
默认的参数值为：

```html
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