点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

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

来源：动视网责编：小采时间：2020-11-27 16:19:21

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

Drop.js-实用的JavaScript下拉弹出层插件_html/css_WEB-ITnose:简要教程 Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层，可以制作多种弹出层效果。它的特点还有：弹出层会在页面尺寸改变和滚动时自动更新位置。弹出层在页面滚动时使用GPU加速来定位。弹出层之

推荐度：

点击下载本文 文档为doc格式

导读Drop.js-实用的JavaScript下拉弹出层插件_html/css_WEB-ITnose:简要教程 Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层，可以制作多种弹出层效果。它的特点还有：弹出层会在页面尺寸改变和滚动时自动更新位置。弹出层在页面滚动时使用GPU加速来定位。弹出层之

简要教程

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：弹出层显示的内容。可以是：

一个DOM元素

HTML字符串

一个返回HTML字符串或DOM元素的函数。content()会在每次弹出层打开时都被调用。

如果该参数没有设置，默认为目标元素的data-${classPrefix}(通常是data-drop)属性的值。

position：弹出层的显示位置，可以是：

'top left'

'left top'

'left middle'

'left bottom'

'bottom left'

'bottom center'

'bottom right'

'right bottom'

'right middle'

'right top'

'top right'

'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。

默认的参数值为：

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])