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

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的类型也是跟着变化的。

11. targetAttr
另外一个获取浮动层内容的途径,如果说是target参数是显式获取,那么targetAttr就是隐式获取。此参数获取顺序在target之后,是通过触发元素自身一些标签属性自带的参数或是值什么的作为浮动层的内容。默认是rel,rel属性是a标签的合法属性,因而很常用。虽然,targetAttr的类型只能是字符串,但是标签上属性对应的值与targetMode也是有关联的。例如,”common”模式下,值只能是元素id,”ajax”模式下只能是地址等。于是,结合上面的”target”参数,我罗列了一个表格,显式了不同targetMode模式下target/targetAttr参数可赋值类型。

target参数和targetAttr参数在不同targetMode下的取值
targetModetargettargetAttrcommonjQuery对象或是选择器元素的idajax图片或是页面地址图片或是页面地址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″之的就是下图所示的位置:

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

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