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-openmy-drop-content来进行渲染,而不是drop-opendrop-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:指定触发弹出层的事件。如果该参数设置为undefinednull,你需要手动管理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:同时设置hoverOpenDelayfocusDelay
  • closeDelay:同时设置hoverCloseDelayblurDelay

默认的参数值为:

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/