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

powerFloat插件中的类名们 脚本之家

3. “list”模式下target参数的数据
当targetMode为”list”的时候,数据来源仅来自target,此target参数必须是数组,否则没有任何浮动层出现。数组内容可以是字符串或是对象字面量。如果是字符串,内容会被直接依次装到li标签内,例如:

target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", ""]

可以看到,最后的“更多”链接也被直接装到列表中了。如果是使用对象字面量,则字面量的属性名是定死的。固定格式如下:

{ href: "https://www.zhangxinxu.com/", text: "脚本之家"}

插件会自动寻找文字内容和链接,而拼成一段a标签HTML片段放置到li标签中,上面这个对象字面量显示的HTML就会是:

<li><a href="https://www.zhangxinxu.com/">脚本之家</a></li>

于是,一个对象数组就组成了链接列表,于是就形成了下拉菜单了。

4. 开放的API方法
与之前的zxxbox弹框插件不同,此处的插件基本上所有的方法都被我私有了,外部是访问不了的。除了:包装器.poaerFloat();外,只预留了唯一的一个开发的API方法,就是$.powerFloat.hide();,就是隐藏目前显示的浮动层。这个方法的使用在demo页面中是有所体现的。

八、更加实际点的实例应用

demo中虽然展现了一些实例,但是毕竟是为了测试插件功能而作的测试,是否在实际应用中可以大放异彩还让人怀疑的,因此,我在国内一些大的知名的网站上随便找了几个有关浮动层的交互,看看此powerFloat插件如何很方便的实现的。

1. 淘宝的顶部下拉
下图为淘宝网站的下拉效果截图:

淘宝网首页下拉 脚本之家

而我使用自己写的powerFloat插件可以更方便的实现上面的效果,效果如下截图:

自己实现的淘宝网顶部的下拉效果 脚本之家

您可以狠狠地点击这里:powerFloat实现淘宝的列表下拉demo

这里就是使用默认的”hover”事件,使用的插件自带的list下拉列表功能。淘宝网的实现借助了标签的嵌套(下拉内容div写好藏在了relative属性的标签下),以及手动的位置计算(基本上每个下拉都有一定position定位),增加了HTML的代码量,CSS代码量,以及工作量等。如果所有的浮动效果同一,自然轻松不少。

2. QQ邮箱的自定义下拉
下图为我QQ邮箱中的自定义下拉截图:

QQ邮箱的自定义下拉 脚本之家

而我使用自己写的powerFloat插件可以很方便的实现上面的效果,效果如下截图:

自己powerFloat实现的自定义下拉 脚本之家

您可以狠狠地点击这里:powerFloat实现QQ邮箱自定义下拉demo

这里使用的是”click”事件,使用common模式装载元素内容(也可以改用list模式实现)。与效果相比没有下拉动画与收起动画,主要是自己对下拉动画收起动画没有什么好感,有些啰嗦;而且位置是会上下计算重定位的,要是列表在页面的上面显示,出现下拉就会奇怪,所有没有添加下拉动画。

3. 人人网好友搜索框的半透明提示
下图为人人网原来的好友搜索半透明框截图:

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

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