最新消息:

第72款插件:jquery-powerFloat.js万能浮动层下拉层插件

图片幻灯插件 杨红伟 7794浏览 0评论

一、插件介绍

注意,插件名为jquery-powerFloat.js。不是jquery.powerFloat.js。作者说:在使用combo合并脚本的时候会出问题,于是,现在使用”-”连接名称了。

powerFloat顾名思意就是“强大的浮动”。使用库jQuery,大小20K多点,使用YUICompressor压缩后大小折半,支持hover, click, focus以及无事件触发;支持多达12种位置的定位,出界自动调整;支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等;可自定义装载容器;内置UI不错的装载容器;支持鼠标跟随等。

二、插件作者

张鑫旭,博客:http://www.zhangxinxu.com/

三:插件图片

2010-12-15_103942

四:插件参数

参数名 默认值 释义说明
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为触发元素

五:插件例子

官方链接:
http://www.zhangxinxu.com/wordpress/2010/12/jquery-powerfloat%E4%B8%87%E8%83%BD%E6%B5%AE%E5%8A%A8%E5%B1%82%E4%B8%8B%E6%8B%89%E5%B1%82%E6%8F%92%E4%BB%B6/comment-page-4/

最新插件版本:
时间:2012-01-28    版本:v1.6.1

官方JS下载:
http://www.zhangxinxu.com/study/js/jquery-powerFloat.js
http://www.zhangxinxu.com/study/js/mini/jquery-powerFloat-min.js

本站JS下载:
http://www.ijquery.cn/js/jquery-powerFloat.js
http://www.ijquery.cn/js/jquery-powerFloat-min.js

DEMO:
例1、 http://www.ijquery.cn/study/demo/powerFloat/demo1.html   【官方所有例子】
例2、 http://www.ijquery.cn/study/demo/powerFloat/demo2.html   【淘宝的顶部下拉】
例3、 http://www.ijquery.cn/study/demo/powerFloat/demo3.html   【点击搜索框时弹出说明】

官方DEMO下载:
http://www.ijqery.cn/demo/powerFloat/powerFloat.zip

六:最简使用教程

1、JS和CSS引用

[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/powerFloat/js/jquery-powerFloat.js"></script>
<link href="http://www.ijquery.cn/study/demo/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#trigger").powerFloat();
});
</script>
<style>
.none{display:none;}
</style>
[/js]

2、HTML引用

[html]
<a id="trigger" href="javascript:;" rel="targetBox">经过我</a>
<div id="targetBox" class="none">测试弹出层</div>
[/html]

七:实例应用

1、【淘宝的顶部下拉】 http://www.ijquery.cn/study/demo/powerFloat/demo2.html

说明:这里用这个插件做下拉列表倒是不难,但是用CSS制作最右边竖线和下拉列表,是非常难的,建议好好学习学习CSS样式!

111
HTML代码:

[html]
<div id="header">
<div id="site-nav">
<ul>
<li>
<div>
<a href="#">我的淘宝<b></b></a>
</div>
</li>
<li>
<div>
<a href="#">我的账户<b></b></a>
</div>
</li>
</ul>
</div>
</div>
[/html]

JS代码

[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/study/demo/powerFloat/js/jquery-powerFloat.js"></script>
<link href="http://www.ijquery.cn/study/demo/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
//我的淘宝
$(".menu").powerFloat({
width: 96,
offsets: {
x: 0,
y: -1
},
targetMode: "list",
target: [{
href: "#",
text: "已买到的宝贝"
},{
href: "#",
text: "已卖出的宝贝"
}],
position: "3-2",
showCall: function() {
$(this).addClass("hover");
},
hideCall: function() {
$(this).removeClass("hover");
}
});
//我的账户
$(".mine").powerFloat({
width: 96,
offsets: {
x: 0,
y: -1
},
targetMode: "list",
target: [{
href: "#",
text: "我的资料"
},{
href: "#",
text: "退出"
}],
position: "3-2",
showCall: function() {
$(this).addClass("hover");
},
hideCall: function() {
$(this).removeClass("hover");
}
});
});
</script>
[/js]

CSS样式

[css]
/*头部*/
#header {
width: 100%;
background:#eeeeee;
margin:0 auto;
}
/*头部-的快捷菜单*/
#site-nav {
width: 950px;
margin:0 auto;
position: relative;
height: 22px;
line-height: 21px;
margin: 0 auto;
padding: 2px 0;
z-index: 10000;
color: #000;
}

#site-nav a {
color: #666;
}

#site-nav a:hover {
color: #f50;
}

/* site-nav位置在右上角 */
#site-nav .quick-menu {
position: absolute;
right: 0;
top: 0px;
}
/* site-nav 位置在右上角 元素右边的竖线-引用背景图片的竖线 */
#site-nav .quick-menu {
padding: 1px 5px 0 10px;
background: transparent url(img.png) no-repeat right 8px;
}
#site-nav .quick-menu li {
float:left;
}
/* 位置在右上角 元素的位置*/
#site-nav .menu-hd {
display: block;
position: relative;
height: 21px;
line-height: 17px;
margin: 3px 1px 0;
padding: 0 22px 0 10px;
cursor: pointer;
z-index: 10002;
}
/* 位置在右上角 元素的下拉三角*/
#site-nav .menu-hd b {
position: absolute;
right: 10px;
top: 7px;
width: 0;
height: 0;
border-width: 4px 4px;
border-style: solid;
border-color: #666 #eee #eee #eee;
font-size: 0;
line-height: 0;
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -webkit-transform .2s ease-in;
-o-transition: -webkit-transform .2s ease-in;
transition: -webkit-transform .2s ease-in;
}
/*鼠标经过后-边框及背景的变化*/
#site-nav .menu:hover .menu-hd,#site-nav .hover .menu-hd {
margin: 2px 0 0;
border: 1px solid #BFBFBF;
border-bottom: none;
background: white;
display: block;
}
/*鼠标经过后的三角变为斜三角*/
#site-nav .menu:hover .menu-hd b,#site-nav .hover .menu-hd b {
border-color: #666 #fff #fff #fff;
-moz-transform: rotate(180deg);
-moz-transform-origin: 50% 30%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: 50% 30%;
-o-transform: rotate(180deg);
-o-transform-origin: 50% 30%;
transform: rotate(180deg);
transform-origin: 50% 30%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
top: 3px\9;
}
[/css]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址