jQuery powerFloat万能浮动层下拉层插件使用介绍(2)

插件可以实现的功能多了,支持的事件多了,又要有精炼的API,API的使用规则自然而然也就多了,复杂了。但是,一旦了解这些规则后,工作就将变得异常轻松,你会发现生活原来如此美好。

1. width
宽度值,与CSS中的width属性的些值是一样的。

CSS width属性值 脚本之家

这里的width也是可以是”auto”(默认),”inherit”,以及具体的宽度值。但是,有所不同的是这里的”inherit”,继承的不是父标签的宽度,而是继承的触发元素的宽度。举个例子,我鼠标移动一个a标签的文字链接上,结果显示了浮动层,如果此时width参数设置的值是”inherit”,则浮动层的宽度就是这个a标签的宽度。此属性在等宽下拉列表下非常有用。

2. offsets
相对于目标位置的偏移值。默认是{x:0, y:0},其中x表示水平方向偏移,y表示垂直方向偏移。根据浮动层(target)与触发元素(trigger)的位置不同,offsets的偏向也是不同的,左侧位置和上部位置offsets是向左上方偏移,而要是浮动层和触发元素在右侧和下方位置接触,则offsets值表示右下方的偏移,大致意思如下图所示:

offsets参数规则图示 脚本之家

其实只要意识到这里的offsets偏移是以触发元素(trigger)为参考点进行偏移就可以了。trigger位置固定,target相对偏移,以trigger为中心,辐射状偏移。举个例子吧,如果offsets.x = 10,那么要是浮动层在右侧,则右偏移10像素,要是浮动层在左侧则左偏移10像素。

3. zIndex
浮动层的层级,浮动层都是采用的绝对定位,所以有层级,默认大小为999。插件自带的UI中的小三角也是绝对定位,其层级比浮动层高一级,所以,小三角默认层级是1000.

4. eventType
事件类型,一般而言,此参数无非这几个:”hover”(默认), “click”, “focus”以及null,其中”hover”表示鼠标悬停和移出事件,”click”表示点击事件,”focus”表示获得焦点事件,适用于表单元素,null表示无事件,也就是trigger绑定了powerFloat方法即触发,此参数在点击A元素,但是让B元素上显示提示上很有用。

5. showDelay
显示延迟。只有当eventType为”hover”时此参数才有用,”click”, “focus”都是无延迟执行的。单位毫秒,当为大于0的整数时生效(使用可参见demo中自定义Tip效果)。

6. hideDelay
鼠标移出延迟。只有当eventType为”hover”时此参数才有用。其中有两种情况下默认是有hideDelay的,一是当hoverHold参数为true的时候,会有200毫秒的隐藏延迟;另外一种情况就是eventType为”focus”时,失去焦点隐藏,也是有200毫秒的延迟关闭(保护点击事件)。

7. hoverHold
当鼠标经过浮动层时浮动层是否依然显示。只有当eventType为”hover”时此参数才有用。如果为false,则表示鼠标一旦离开trigger(触发元素),则target(浮动元素)隐藏(使用可参见demo中自定义Tip效果)。

8. hoverFollow
是否鼠标跟随。参数可以是false,true以及关键字”x”, “y”,其中false为默认值,表示不鼠标跟随,”x”表示仅水平方向鼠标跟随,”y”表示仅垂直方向,无论是”x”还是”y”,浮动层都不会与触发元素发生重叠的,只是单向的位置移动。但是,如果hoverFollow为true,则是真正意义上的鼠标跟随,target的左上角会紧随鼠标,也会与trigger发生重叠,注意,此时应该设置一定的offsets值,否则会因为与鼠标位置过近的原因,反复触发鼠标移入移出事件,要是浏览器性能不够好,小心页面被晃荡掉。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfswx.html