简要教程
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构造函数中使用。
一个DOM元素
HTML字符串
一个返回HTML字符串或DOM元素的函数。content()会在每次弹出层打开时都被调用。
如果该参数没有设置,默认为目标元素的data-${classPrefix}(通常是data-drop)属性的值。
'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)属性的值。
'click'
'hover'
'focus'
'always'
如果该参数没有设置,默认为目标元素的data-${classPrefix}-openOn(通常是data-drop-openOn)属性的值。
默认的参数值为:
defaultOptions = position: 'bottom left' openOn: 'click' constrainToWindow: true constrainToScrollParent: true classes: '' hoverOpenDelay: 0 hoverCloseDelay: 50 focusDelay: 0 blurDelay: 50 tetherOptions: {}
方法
下面的方法都可以通过Drop对象实例来调用。
事件
drop实例有以下一些可用绑定的事件。
可触发的事件有:
drop弹出层插件的github地址为: http://github.hubspot.com/drop/
来源:jQuery之家