Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层,可以制作多种弹出层效果。它的特点还有:
- 弹出层会在页面尺寸改变和滚动时自动更新位置。
- 弹出层在页面滚动时使用GPU加速来定位。
- 弹出层之间可以进行嵌套。
- 弹出层可以在元素的12个位置上显示。
- 可以自定义是在点击元素、鼠标滑过元素或元素聚焦时显示弹出层。
使用方法
由于该弹出层插件依赖于tether.js插件,使用该弹出层插件需要在页面中引入tether.min.js、drop.min.js和drop-theme-arrows.css文件。
<link rel="stylesheet" href="drop-theme-arrows.css" /> <script src="tether.min.js"></script> <script src="drop.min.js"></script>
初始化插件
要初始化一个drop,需要实例化一个Drop
对象。
drop = new Drop({ target: document.querySelector('.drop-target'), content: 'Welcome 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: 'Welcome 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])
off(eventName, [handler])
once(eventName, handelr, [ctx])
可触发的事件有:
open
close
drop弹出层插件的github地址为:http://github.hubspot.com/drop/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!