这篇文章发布于 2010年12月16日,星期四,01:02,归类于 jQuery相关。 阅读 832827 次, 今日 77 次 251 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1328
一、写插件的缘由
为什么想写此插件,想来想去,归结为一个字:“懒”。不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春。于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了。这种感觉就好比《大话西游》里悟空一巴掌拍死唐僧这只苍蝇一样。那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等)。
二、插件概述
插件名为jquery-powerFloat.js。//zxx:之前我喜欢用”.”连接,后发现在使用combo合并脚本的时候会出问题,于是,现在使用”-“连接名称了。
支持hover, click, focus以及无事件触发;支持多达12种位置的定位,出界自动调整;支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等;可自定义装载容器;内置UI不错的装载容器;支持鼠标跟随等。
三、demo及下载
demo
您可以狠狠地点击这里:万能浮动插件powerFloat测试页面
下为demo页面中鼠标经过显示大图效果截图:
下载
JS文件下载:jquery-powerFloat.js(未压缩) 或 jquery-powerFloat-min.js(压缩)
//zxx:下载均右键 – [目标|链接]另存为
最近更新:2011-01-03 2012-01-13
四、如何使用
使用很简单,统一的模式,就是$(选择器).powerFloat({..});
具体使用如下:
<link rel="stylesheet" href="/study/css/powerFloat.css" type="text/css" />
注意:powerFloat.css有两个菊花图片地址,检查下是否是外链到本站的,请及时修改。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="/study/js/mini/jquery-powerFloat-min.js"></script>
注意:请不要直接外链本站点的JS!流量有限。
假设此时页面上有个链接,其HTML如下:
<a id="trigger" href="javascript:;" rel="targetBox">经过我</a>
则:
$("#trigger").powerFloat();
如果要用几个关键词来概括此插件,无非就是触发元素(trigger,也就是选择器绑定对象),触发事件(API中的eventType),浮动元素(target,各种方式获取的元素),定位(target的定位)。下文中,trigger一词就是指触发元素,target指浮动元素。
由于插件集合的功能较多,所以使用规则稍微多了点,具体可参见下面的API表格展示,之后的详细解释。这里就不多说了。
五、API参数
参数名 | 默认值 | 释义说明 |
---|---|---|
width | "auto" | 其他可选参数:"inherit",数值(px)(百分比等),"auto"表宽度自动,"inherit"表宽度与方法触发元素宽度一样 |
offsets | {x:0, y:0} | 浮动层的偏移值。可正可负。如果为正值,右下方元素右下方偏移,左上方元素左上方偏移。偏移方向为扩散状 |
zIndex | 999 | 浮动框层级。插件自带小三角层级为999+1,数值上总是大1 |
eventType | "hover" | 其他可选参数:"click", "focus",如果参数为其他,则绑定触发浮动层的显示与定位 |
showDelay | 0 | 事件类型(eventType)为"hover"时浮动层显示的延迟时间,单位毫秒 |
hideDelay | 0 | 鼠标移出对象时浮动层隐藏延迟时间 |
hoverHold | true | 布尔型,浮动层是否鼠标悬停。如果为false,只要鼠标移出触发元素,浮动层即隐藏 |
hoverFollow | false | 其他可选参数:true, "x", "y"。是否鼠标跟随。"x"表示仅水平方向跟随,"y"为垂直方向,true或其他参数为任意方向跟随 |
targetMode | "common" | 字符串,关键字参数还有:"ajax", "list", "remind"。表示浮动层的类型 |
target | null | 浮动层内容来源,优先选取来源,根据targetMode的不同,这里的参数类型也有所不同。支持function类似,可实现动态数据效果。 |
targetAttr | "rel" | 自定义的标签属性。也是浮动层内容来源,可用作元素id,或是字符串 |
container | null | jQuery对象,转载浮动层的容器,如果targetMode自定义,可以使用"plugin"关键字,表示使用插件自带容器 |
reverseSharp | false | 布尔型。尖角显示是否反转。默认ajax, remind是显示三角的,其他如list和自定义形式是不显示的 |
position | "4-1" | 浮动层显示的位置。此规则稍微复杂,下面有详解 |
edgeAdjust | true | 布尔型。如果浮动层在显示屏之外,是否调整浮动层位置 |
showCall | $.noop | 浮动层显示时候的回调函数。其中,上下文this 为触发元素,支持一个参数,为浮动对象元素。但,多交互时候,该元素可能会丢失。 |
hideCall | $.noop | 浮动层隐藏时候的回调函数。其中,上下文this 为触发元素 |
(create by zhangxinxu 2010-12-15)
六、API参数详解
插件可以实现的功能多了,支持的事件多了,又要有精炼的API,API的使用规则自然而然也就多了,复杂了。但是,一旦了解这些规则后,工作就将变得异常轻松,你会发现生活原来如此美好。
1. 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
偏移是以触发元素(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
毫秒的隐藏延迟(注意:当多个hover元素连在一起的时候,需要设置showDelay
为大于200
的值,如210
, 即鼠标延迟,否则会出现快速移动浮动层定位的问题。);另外一种情况就是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
值,否则会因为与鼠标位置过近的原因,反复触发鼠标移入移出事件,要是浏览器性能不够好,小心页面被晃荡掉。
9. targetMode
浮动层类型。字符串参数。内置关键字参数有:"common"
, "ajax"
, "list"
, "remind"
。其中"common"
为默认,表示加载页面上的元素,元素就是浮动层本身;"ajax"
就是加载外部元素,例如图片,HTML片段等,默认使用内置的容器,含loading效果;"list"
专门用作下拉列表;"remind"
是提示,内容只能是文字或是含有HTML代码的字符串。此插件强大之处就是您可以自定义浮动层类型。例如,在demo中,我自己自定义的tip类型,如何定义,如何写样式完全取决于您的设计与页面需求。然后,定位,装载等全部交给插件,这个后面还会单独讲述。
10. target
非常重要与最常用的一个参数,是浮动层的内容来源,甚至就是浮动层本身(targetMode
为common
的部分情况)。默认是null
,由于target
参数是插件两个浮动层内容获取来源之一,且是优先获取来源,所以,当target
为null
时,插件会从下一个参数targetAttr
获取内容。根据targetMode
参数不同,target
的类型也是跟着变化的。
我们可能会遇到这样的情况,每次浮动显示的数据是动态的,而默认powerFloat是静态数据,如何破?很简单,target
支持function
类型参数,可以返回动态数据,例如:
target: function() {
return $("#element").attr("data-url")
}
11. targetAttr
另外一个获取浮动层内容的途径,如果说是target
参数是显式获取,那么targetAttr
就是隐式获取。此参数获取顺序在target
之后,是通过触发元素自身一些标签属性自带的参数或是值什么的作为浮动层的内容。默认是rel
,rel
属性是a
标签的合法属性,因而很常用。虽然,targetAttr
的类型只能是字符串,但是标签上属性对应的值与targetMode
也是有关联的。例如,"common"
模式下,值只能是元素id
,"ajax"
模式下只能是地址等。于是,结合上面的"target"
参数,我罗列了一个表格,显式了不同targetMode
模式下target
/targetAttr
参数可赋值类型。
补充于2012-01-28:现target
参数支持function
类型,以支持动态地址实现。具体可参见demo最后一例,需要有返回值。
targetMode | target | targetAttr |
---|---|---|
common | jQuery对象或是选择器 | 元素的id |
ajax | 图片或是页面地址 | 图片或是页面地址 |
list | 数组,或是{href:"", text:""}格式对象数组 | 无效 |
remind | 字符串,一般文字或是含HTML片段字符串 | 字符串,一般文字或是含HTML片段字符串 |
other(其他) | jQuery对象或是选择器,或是字符串,或是HTML片段 | 选择器,元素id,或是文字等字符串 |
(create by zhangxinxu 2010-12-15)
12. container
jQuery对象(需当前页面上存在),装载浮动层的容器,如果targetMode
自定义,可以使用"plugin"
关键字,表示使用插件自带容器(会显示三角)。
13. reverseSharp
一种聪明的显示与不显示三角的方法。此参数含义指对当前三角使用规则进行反转。现在默认三角显示规则是:只有当targetMode
为"ajax"
和"remind"
时会显示三角,任何情况都不显示插件内的三角指向效果。但是,如果您觉得这个三角很卡哇伊,想在自己自定义的浮动层上使用,就可以使用reverseSharp
参数,让其显示,三角的居中定位插件都已经帮你完成了。或是是你Ajax时想使用自己新写的box装载浮动内容,而不需要这个三角,就可以使用reverseSharp
参数,让其不显示。这里说了很多次的三角指的是(见下图):
14. position
看上去简单,实际上最为扰人的一个参数。是自己为了更适应各种情况的定位而自己制定的一套规则。一开始自己尝试使用slide-left这类字符串关键字表示各个位置,但是,实际发现,trigger
与target
相互组合的各个位置实在是太多了,几个英文字符串根本表示不来,同时在实现上也不太容器,于是自己制定了一套比较易懂的定位规则,使用数字表示位置。其参数值格式一定是”数字-数字”这种格式的字符串,中间的分隔线”-“的作用就是分隔,其中第一个数字表示触发元素trigger
的位置,后一个数字表示浮动元素target
的位置,也就是"trigger-target"
。那么,现在重要的就是知道元素的各个位置对应的数字是多少就可以了。元素各个位置对应数值如下图:
四个边角,按照CSS margin/padding属性的顺序,依次是1, 2, 3, 4,而四边的中心按照顺时针方向依次是5, 6, 7, 8。无论是trigger元素还是target元素都遵循这个位置规则。于是,插件默认的position参数”4-1″之的就是下图所示的位置:
trigger的4位置与target的1位置重合。哇哦,聪明的你可能意识到,每个元素8个位置,合起来岂不是有64种(数学退化了,不正确欢迎指正)不同的布局方式。确实,64种情况,是要搞死人的,因此,考虑到实际使用情况以及简化布局的类型,自己又制定了一个布局规则以减少可能的布局情况,就是:区域无重叠,边框重叠,居中对居中规则。
区域无重叠指布局元素主体垂直方向上无重叠(无考虑offsets
偏移),例如下图这种(“1-1”)情况就是不在规则内的:
所谓“边框重叠”,就是要有边框线重叠,于是下面这种情况(“3-1”)就不在规则内:
居中对居中就是指边框中心点只能对于边框的中心点,所以下面这种情况就不在规则内:
因此,实际上合法的布局为下面的这12种,”4-1″, “1-4”, “5-7”, “2-3”, “2-1”, “6-8”, “3-4”, “4-3”, “8-6”, “1-2”, “7-5”, “3-2″,其他所有的布局类型都会被重置为默认的”4-1”
15. edgeAdjust
布尔值,按照设定的position
参数,如果浮动层的位置出了屏幕,是否重新定位。默认为true
,表示进行重定位。这里的重定位规则也比较复杂,但是,对于使用者而言,了解这里的规则没有任何意义,所以这里不展开叙述。此参数当hoverFollow
为true
时,或是位置关键字时,重定位功能被大大削弱了。
16. showCall
浮动层显示的回调函数。回调函数内部$(this)
表示当前的trigger
,还支持一个参数,表示当前的target
。
17. hideCall
浮动层隐藏时执行的回调函数。回调函数内部$(this)
表示当前的trigger
。
七、其他重要的说明
1. 三角的颜色
插件为了与容器的边框色和背景色一致,三角的颜色是自动在容器上寻找相一致的颜色的。并且,三角颜色的选择也是有方向性的,例如上面显示的三角,只会检测是否有下边框颜色,而不会错误的选取上边框的颜色值。所以,您在使用自定义容器的时候不用担心容器的颜色会与插件的三角的颜色不一致,即使设置上下左右四个边框颜色不一样都没有关系。如找不到边框色或是背景色,相对应三角是不显示的。
① class的命名规则
此插件有点不好的,就是class类名都嵌入在了js代码中,但是,自己觉得还好,想全部提出来很难的。所有插件功能相关的class命名都是以下划线("_"
)连接,所有命名都是以"float"
为前缀。例如:"float_ajax_image"
, "float_remind_box"
等。
如果不是
"common"
类型,且下面的container
参数为null
的时候,插件会自动创建一个容器外框,这个容器外框会自动带有一个id
,命名格式是"floatBox_" + targetMode
,以及一个class,命名格式是:"float_' + targetMode + '_box"
,例如如果是list类型,容器div
就会是:
<div id="floatBox_list" class="float_list_box"></div>
您可以在插件附带的powerFloat.css中找到诸如,"float_ajax_box"
, "float_remind_box"
等样式,就是针对targetMode
为"ajax"
和"remind"
类型的浮动层。当然,容器的class是支持自定义的。例如,您设置targetMode
的值为"tip"
,那么您就可以为类名float_tip_box
书写您自定义的容器样式了。例如下面:
.float_tip_box { line-height: 18px; padding: 0 3px; background-color: #ffffe0; -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); border: 1px solid #333; position:absolute; }
这就是demo页面中自定义的tip效果,外部框框的样式。这个效果仅仅是示例,发动你无限的创意,在powerFloat插件的帮助下,要想有什么样的浮动UI效果基本上都可以实现。
③ 插件隐藏的class
此插件还隐藏了很多可供使用的类名,具体可参见下表:
类名 | 作用 |
---|---|
float_loading | ajax请求内容等待提示的内容框 |
float_ajax_image | ajax请求的图片 |
float_ajax_data | ajax请求到数据后装载的内容框 |
float_ajax_error | ajax请求出问题后的内容框 |
float_list_ul | 下拉列表列表外框 |
float_list_li_first | 下拉列表中的第一个li标签 |
float_list_li_last | 下拉列表中的最后一个li标签 |
float_list_a | 含链接下拉列表中a标签的class |
float_list_null | 下拉列表无数据时的提示内容框 |
3. “list”模式下target参数的数据
当targetMode
为"list"
的时候,数据来源仅来自target
,此target
参数必须是数组,否则没有任何浮动层出现。数组内容可以是字符串或是对象字面量。如果是字符串,内容会被直接依次装到li
标签内,例如:
target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"]
可以看到,最后的“更多”链接也被直接装到列表中了。如果是使用对象字面量,则字面量的属性名是定死的。固定格式如下:
{ href: "http://www.zhangxinxu.com/", text: "张鑫旭-鑫空间-鑫生活" }
插件会自动寻找文字内容和链接,而拼成一段a标签HTML片段放置到li标签中,上面这个对象字面量显示的HTML就会是:
<li><a href="http://www.zhangxinxu.com/" class="float_list_a">张鑫旭-鑫空间-鑫生活</a></li>
于是,一个对象数组就组成了链接列表,于是就形成了下拉菜单了。
其中,href
属性是可以缺省的,即可以直接:
{ text: "张鑫旭-鑫空间-鑫生活" }
这种情况下,插件会自动用javascript:
作为a
标签的href
属性,于是,上面的字面量显示的终HTML就会是:
<li><a href="javascript:" class="float_list_a">张鑫旭-鑫空间-鑫生活</a></li>
这在下拉列表是JavaScript事件的时候比较有用。
4. 开放的API方法
与之前的zxxbox弹框插件不同,此处的插件基本上所有的方法都被我私有了,外部是访问不了的。除了:包装器.powerFloat();
外,只预留了唯一的一个开发的API方法,就是$.powerFloat.hide();
,就是隐藏目前显示的浮动层。这个方法的使用在demo页面中是有所体现的。
八、更加实际点的实例应用
demo中虽然展现了一些实例,但是毕竟是为了测试插件功能而作的测试,是否在实际应用中可以大放异彩还让人怀疑的,因此,我在国内一些大的知名的网站上随便找了几个有关浮动层的交互,看看此powerFloat插件如何很方便的实现的。
1. 淘宝的顶部下拉
下图为淘宝网站的下拉效果截图:
而我使用自己写的powerFloat插件可以更方便的实现上面的效果,效果如下截图:
您可以狠狠地点击这里:powerFloat实现淘宝的列表下拉demo
这里就是使用默认的”hover”事件,使用的插件自带的list下拉列表功能。淘宝网的实现借助了标签的嵌套(下拉内容div写好藏在了relative属性的标签下),以及手动的位置计算(基本上每个下拉都有一定position定位),增加了HTML的代码量,CSS代码量,以及工作量等。如果所有的浮动效果同一,自然轻松不少。
2. QQ邮箱的自定义下拉
下图为我QQ邮箱中的自定义下拉截图:
而我使用自己写的powerFloat插件可以很方便的实现上面的效果,效果如下截图:
您可以狠狠地点击这里:powerFloat实现QQ邮箱自定义下拉demo
这里使用的是”click”事件,使用common模式装载元素内容(也可以改用list模式实现)。与效果相比没有下拉动画与收起动画,主要是自己对下拉动画收起动画没有什么好感,有些啰嗦;而且位置是会上下计算重定位的,要是列表在页面的上面显示,出现下拉就会奇怪,所有没有添加下拉动画。
3. 人人网好友搜索框的半透明提示
下图为人人网原来的好友搜索半透明框截图:
而我使用自己写的powerFloat插件可以非常非常方便地实现与之一样的效果。
调用代码如下:
$("#navSearchInput").powerFloat({ eventType: "focus", targetMode: "search", target: "多个关键字用空格隔开<br />(例:汪洋 北京大学)" });
最后的效果如下截图:
您可以狠狠地点击这里:powerFloat实现人人网搜索半透明提示demo
这里使用的是"focus"
事件,使用的是自定义浮动模式(“search”)。
九、结语
前段时间,还在暖阳下悠闲地钓鱼,今天就大雪纷飞,时间久这样子,一晃荡就不见了。此插件从开始着手写到现在即将发布差不多耗了10天的时间,平时手头上还有不少工作,所以最近一段时间是比较忙的。CSS 相对/绝对(relative
/absolute
)定位系列还有至少三篇文章积压着没有写,个人网站还要做WAP版。所以,年前是非常忙碌的了。
不好意思,每次文章要结束的时候都忍不住发些小牢骚,舒缓舒缓自己小小的情绪。我对自己的写的这个powerFloat插件做个简单的评价吧:当初设想的时候会兴奋,觉得很牛叉,什么浮动层都可以一个插件实现;但是,现在实现了,却没有了当初的兴奋,因为虽然看上去插件功能强大了,但是,同时规则也变得复杂了,学习成本变高了,同时插件本身被限制的地方也多了,例如由于考虑到各种布局情况,不能随便添加下拉动画效果等。事物均有两面性,有利也有弊。有时候自我感觉良好的东西别人不一定良好,好比看日式爱情动作片的人爽,做的人却不一定爽。
代码质量方面,还是有不少地方值得改进的,例如对this保护上的处理。就学习而言,收获还是不小的,首先对对象字面量中this的使用有了进一步的认识,对jQuery的data属性(结合HTML5中的data-)有了更感性的认识等。
虽然这两天的不断的测试发现了不少bug且已经修复,但是毕竟是一个人,时间精力有限,且不是专业的测试工程师,关键是自己js的功力仍然很稚嫩,所以插件肯定还会有不少的bug的。要是您不嫌弃试用了该插件并发现一些bug或是有什么改进的意见,非常欢迎提出来。
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1328
(本篇完)
- js页面文字选中后分享到新浪微博实现 (0.332)
- 详细了解CSS :focus-within伪类及其交互应用 (0.266)
- HTML5 datalist在实际项目中应用的可行性研究 (0.222)
- IE6下png背景不透明问题的综合拓展 (0.177)
- 小tip: 微博新版查看大图前后浏览的另外一种实现 (0.166)
- CSS touch-action简介与treated as passive错误解决 (0.166)
- jQuery smartMenu右键自定义上下文菜单插件 (0.162)
- jQuery powerSwitch万能slide(切换)插件 (0.136)
- CSS 相对/绝对(relative/absolute)定位系列(二) (0.133)
- 告别JS浮层,全新的CSS Anchor Positioning锚点定位API (0.133)
- HTML CSS列表元素ul,ol,dl的研究与应用 (RANDOM - 0.011)
谢谢分享!!!
$(“#piclist a[id^=’linkbtnpic_’]”).powerFloat({
targetMode: “ajax”,
target: $(this).find(“img”).attr(“src”),
hoverFollow: “y”,
position: “6-8”
});
原本以为$(this)是触发控件,结果不是。
怎样根据a里面的img的src来显示图片?
$(“#piclist a[id^=’linkbtnpic_’]”).each(function() {
$(this).powerFloat({
targetMode: “ajax”,
target: $(this).find(“img”).attr(“src”),
hoverFollow: “y”,
position: “6-8″
});
});
如果是要在一个循环列表,显示每一条信息的详细,应该怎么处理啊?
如:
数据1
我是数据1的详情!
$(function() {
$(“#tip1”).powerFloat({target: $(“#info1”)});
});
数据2
我是数据1的详情!
$(function() {
$(“#tip2”).powerFloat({target: $(“#info2”)});
});
数据3
我是数据1的详情!
$(function() {
$(“#tip3”).powerFloat({target: $(“#info3”)});
});
<a href=”javascript:” class=”tip” rel=”info1″>数据1</a>
<a href=”javascript:” class=”tip” rel=”info2″>数据2</a>
<a href=”javascript:” class=”tip” rel=”info3″>数据3</a>
$(“.tip″).powerFloat();
你好,你的万能浮动层插件与discuzX1.5的幻灯片有冲突,引入你的插件文件幻灯片就不显示了,应该怎么兼容呀,谢谢了,希望看到能回复,谢谢。qq386004920
在有frame的页面用了这个插件后只要页面弹出过层,原来frame页面上的链接的 Target 属性就变了,变成一点链接就弹出新窗体
提交的代码变错了,总之思路就是加个全屏iframe在最底层,就挡住了select控件,再加一个全屏DIV在iframe上一层,响应onclick事件关闭浮动层(iframe不能响应onclick,奇怪)
浮动层下面如果是select控件,在IE6下总会显示在最上面,挡往浮动层的临时解决方案
受实例启发
$(“#showBrandList”).powerFloat({
targetMode: “ajax”,
target:”http://www.baidu.com/”,
showCall: function() {
if (!$(“#overLayIframe”).size()) {
$(”).prependTo($(“body”));
$(”).prependTo($(“body”));
$(“#overLayIframe,#overLayDiv”).css({
width: “100%”,
backgroundColor: “#000”,
opacity: 0.2,
position: “absolute”,
left: 0,
top: 0,
zIndex: 99
}).height($(document).height()).bind(“click”,function(){$.powerFloat.hide();$(“#overLayIframe,#overLayDiv”).remove();});
$(“#overLayDiv”).css({
zIndex: 100
})
}
},
hideCall: function() {
$(“#overLayIframe,#overLayDiv”).remove();
}
});
如果浮动层下面是select控件,在IE6下就会,select控件总会显示在最上面,挡往浮动层。
首先非常感谢博主提供了这么棒的插件。提个问题,JQuery1.6发布了,发现使用JQuery1.6时powerFloat的浮动框显示不出来,用JQuery1.5.2就没问题。
每次都放那张屏蔽掉左边的图,你真邪恶啊
博主你好,非常感谢提供如此好用的控件。但是使用过程中发现有一个小小问题。就是在google浏览器下,加载层的内容在隐藏后,再打开时,会被重新加载(我在层里面放了个iframe,iframe里加载了某个页面,因此发现了这个问题)。IE下没这个问题。不知如何解决。
我用opera11试了demo页面,确实都是正常的,但是我试了加载本地的html就不行,在powerFloat源码中发现success: function(data) 获取data的长度在IE,FF下都是正常的,Opera下是0,我想是这个原因,担不知道为什么
我是这样使用的
demo.html
加载common.css、powerFloat.css、jquery-powerFloat.js、jquery1.4.4.min.js
《input id=”trigger12″ type=”button” src=”test.html” value=”点击我” /》
$(function() {
$(“#trigger12”).powerFloat({
eventType: “click”,
targetMode: “ajax”,
targetAttr: “src”,
position: “8-6”
});
});
opera 11.01下,ajax外部html页面不能加载,FF,IE正常
$(“#trigger12”).powerFloat({
eventType: “click”,
targetMode: “ajax”,
targetAttr: “src”,
position: “8-6”
});
@uidin 我在Opera11.01下看了下demo页面,加载外部HTML页面并无问题。你看看会不是是其他什么地方的错误影响这里的加载。
真不错,轻量级而且功能强大
不过,能不能在提示层的右上方添加一个关闭功能,显示外部图片或html时页面大的时候,不好关闭
jQuery powerFloat 有版權宣告嗎? 是 Open source 嗎? 還是有什麼限制? 謝謝!
没限制。可以分享与编辑。只要留个名就可以了。
条件是下拉项目内容很多,超出了浮动层的高度
@膜拜主人 下拉项过多的问题已经修复。感谢提出此bug。
主人不给力呀,问题还没解决:有一个问题,如果弹出层中有select控件,在控件中下拉点选项目后,PowerFloat层就消失了,如何解决。应用实例如:淘宝的城市选择功能
很强大的说,不过有情况实现不了。
比方说哈,想在出现的浮层上再实现二级浮层,就不行了。
不知道是我没找到方法,还是什么
@张 鑫旭 我发现一个Bug,正则表达式写的问题
第151行
if (/[\.jpg|\.png|\.gif|\.bmp|\.jpeg]$/i.test(url)) {
应该改为
if (/(\.jpg|\.png|\.gif|\.bmp|\.jpeg)$/i.test(url)) {
才对,要不然造成加载.htm也是显示“图片加载失败”,加载.html只会显示三角形而不见内容。
@小新 多谢提醒。
很有用,希望能支持多个弹出层就好了,可以单个的关闭
有一个问题,如果弹出层中有select控件,在控件中下拉点选项目后,PowerFloat层就消失了,如何解决。应用实例如:淘宝的城市选择功能
当页面编码为SJIS时三角就不是三角了。
UTF8和GB2312正常,
其他编码未测试。
在框架结构中好像有问题,会改变框架的name属性呀。楼主能修正这个问题么。
@bluer1 你好,可以给个实例页面地址吗,我看下是什么情况。
哥不常来呀
我设置//targetMode: “list”,怎么层乱码呀,这个插件很好,能否讲的详细些,还有你把淘宝的那个实例代码代码单独列出来(css)讲讲吧。谢谢了。
赞一个
我今天才发现这里,我要把你的文章好好再看一看,所有的
最近在学CSS+DIV布局,查找position属性定位方式,没想到看了一篇接一篇,博主讲得东西都很好,很系统,非常感谢!~
暂时用不上万能下拉插件(已经下载保存,待以后再用),看了此篇,讲到定位问题,把绝对定位放在BODY上用,维护的时候的确是容易了,但对于不同的分辨率的显示器和不同的浏览器,会不会产生BUG?
太强大了,在项目中用到,感谢博主的插件
默认实例:四、简单提示的显示把JS修改成
$(“.pwdTrigger”).powerFloat({
eventType: “focus”,
targetMode: “remind”,
targetAttr: “placeholder”,
position: “6-8”
箭头和提示层位置错误
多谢提醒,”6-8″位置问题已修复。
很好!不错的封装。。插件回去研究研究,谢谢了
确实很强大~~支持一下~~
哥顶你,好东西。
好东西啊!!!!
我发现,每次我要做新项目,新研究的时候,总能再兄台你这,找到合适自己的代码
真是万分感谢啊 -。-如果可以且允许的话,偶希望转载你这篇文章,不知道阁下意下如何?
jQuery powerFloat万能浮动层下拉层插件
这个仿淘宝的下拉菜单的在IE6下点击不到链接的时候,也就是点击到空白的地方的时候会失去焦点。兼容性还有待改进一下!
那个三角符号默认居中了,如果提示内容过短,且对齐方式是向左。。。那三角符号就没有指向正确。。
@fatkun 是这样的,这是没有办法的事情。
哦~~知道原因了~~
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等):
这个输入框,如果填写错误之后,没有理会~~
然后去操作别的东西,无论点击了什么,鼠标焦点都会到这个input框~~呵呵~~
哇~张大哥~~你·~~五体投地了~~
这么强大的插件你也搞出来了~~
效果真是很棒~~
不过我没仔细研究,影响最深刻的就是你的DEMO页面,点击空白的地方,鼠标都会调到一个input框里面去~~不知什么原因~~
还有个印象就是那个postion的算法~~hoho·~复杂~~
你不只在交流技术,而且也实现了一个社会人的价值!
我挺你!
一直关注LZ的博客,从未失望过~
呵呵,又见张含韵。 吾辈懒人向博主学习了
你的文章,提升了整个WEB前端开发行业的层次,你是真正的前端布道师!
@夏雨 言重了。
从你这里学了很多关于CSS的知识,对工作很有帮助。如果方便的话,可以通过MSN联系。
人人网的示例有bug,多次点击输入框时,提示框中的文字会隔一次显示。
@夏雨 确实。火狐浏览器有正则表达式奇偶验证的bug。现已修复,多谢提醒。
不错,赞一个!
想请教一下,有没有看QQ邮箱的代码,感觉怎么样?
谢谢分享,每次来你博客都能学到很多东西~
这几天无意搜索来到贵站,很快被大量文章吸引,篇篇高水准,更难得的是主人整理编写得如此认真,从不留言的我,也忍不住要赞美几句了。
这个插件的功能正是我苦苦找了好久的而不得的,还有其它实用插件没想到都是主人亲手编写,艳羡不已,膜拜之~
提个瑕疵,向下的三角在ie7 8中有点合不上口
[img]http://61b7.ipc.la/style/img/ttt.jpg[/img]
@kaka 很奇怪,我这边没有问题的。三角是字符形成,受字体和文字大小影响。看你提供的图片,是字体过大,三角显示不完整,具体什么原因还不能确定,希望可以提供更多问题细节。
懒得无比强大
看起来很不错!
this 不是对象字面量吧。
目前这个用数字表示定位点的方式不是很直观,有学习成本。其实可以参考一下键盘上数字键的布局,上下左右分别是 8,2,4,6,ASS 等外挂字幕脚本就是这样做的。
非常好的插件。。。
收录:http://www.open-lib.com/Lib/1279.jsp