jQuery万能浮动框插件测试
2011-08-16 20:53
260 查看
一、加载页面上元素
默认rel加载HTML代码:默认rel加载
JS代码:$("#trigger1").powerFloat();
target参数加载
HTML代码:target参数加载
JS代码:$("#trigger2").powerFloat({
target: $("#targetBox")
});
target参数为选择器
HTML代码:target参数为选择器
JS代码:$("#trigger3").powerFloat({
target: ".target_box"
});
二、Ajax加载外部元素
rel属性显示图片HTML代码:rel属性显示图片
JS代码:$("#trigger4").powerFloat({
targetMode: "ajax"
});
target参数为图片地址
HTML代码:target参数为图片地址
JS代码:$("#trigger5").powerFloat({
target: "http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg",
targetMode: "ajax"
});
加载外部HTML片段:点击切换显示
HTML代码:点击切换显示
JS代码:$("#trigger6").powerFloat({
eventType: "click",
target: "/study/201009/html-load.html",
targetMode: "ajax"
});
加载外部页面数据失败:点击测试
HTML代码:点击测试
JS代码:$("#trigger7").powerFloat({
eventType: "click",
target: "http://www.baidu.com/",
targetMode: "ajax"
});
三、下拉列表的显示
纯文字列表下拉:点击显示姓名列表▼HTML代码:点击显示姓名列表▼
JS代码:$("#trigger8").powerFloat({
width: "inherit",
eventType: "click",
target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "更多 >>"],
targetMode: "list"
});
带链接的文字下拉:更多文章▼
HTML代码:更多文章▼
JS代码:$("#trigger9").powerFloat({
width: 250,
target: [
{
href: "##",
text: "这是文章1的说"
},
{
href: "##",
text: "啊,看,文章2"
},
{
href: "##",
text: "啊啦,不好,我把文章3忘家里了!"
},
{
href: "##",
text: "马萨噶,这就是传说中的...文章4..."
},
{
href: "##",
text: "什么嘛,就是文章5,害我白期待一场"
}
],
targetMode: "list"
});
无列表数据显示
HTML代码:无列表数据显示
JS代码:$("#trigger10").powerFloat({
targetMode: "list"
});
四、简单提示的显示
输入密码:再次输入:
HTML代码:输入密码:
再次输入:
JS代码:$(".pwdTrigger").powerFloat({
eventType: "focus",
targetMode: "remind",
targetAttr: "placeholder",
position: "1-4"
});
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等):
确定
HTML代码: 确定
JS代码:var fnPosTri = function() {
var oPosTri = $("#posTrigger1"), vPosTri = $.trim(oPosTri.val());
if (vPosTri === "") {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "输入内容不能为空!",
position: "1-4"
}).focus();
} else if (/\W/g.test(vPosTri)) {
oPosTri.powerFloat({
eventType: null,
targetMode: "remind",
target: "只能输入英文字符、数字和下划线",
position: "1-4"
}).focus();
} else {
$.powerFloat.hide();
}
};
$("#trigger11").bind("click", fnPosTri);
$("#posTrigger1").bind("blur", fnPosTri);
四、自定义浮动提示
模拟title的tip提示显示: 摸我 我也要 还有我HTML代码:摸我
我也要
还有我
JS代码:$(".tipTrigger").powerFloat({
offsets: {
x: -10,
y: 22
},
showDelay: 200,
hoverHold: false,
targetMode: "tip",
targetAttr: "tip",
position: "3-4"
});
右上角固定位置的操作提示层(ajax请求中提示,页面跳转中提示等):
登录提交刷新
HTML代码:
登录
提交
刷新
CSS代码:.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }
JS代码:
$(".operateTrigger").click(function() { var txt = $(this).text(); //IE6位置 if (!window.XMLHttpRequest) { $("#targetFixed").css("top", $(document).scrollTop() + 2); } //创建半透明遮罩层 if (!$("#overLay").size()) { $('<div id="overLay"></div>').prependTo($("body")); $("#overLay").css({ width: "100%", backgroundColor: "#000", opacity: 0.2, position: "absolute", left: 0, top: 0, zIndex: 99 }).height($(document).height()); } //显示操作提示,最关键核心代码 $("#targetFixed").powerFloat({ eventType: null, targetMode: "doing", target: "正在" + txt + "中...", position: "1-2" }); //定时关闭,测试用 setTimeout(function() { $("#overLay").remove(); $.powerFloat.hide(); }, 2000); });
五、自定义装载容器
自定义容器装载外部图片(无柔化投影):CSS代码:
.custom_container{position:absolute; background-color:rgba(0, 0, 0, .5); background-color:#999\9;} .custom_container img{padding:0; position:relative; top:-5px; left:-5px;}
HTML代码:
JS代码:$("#trigger12").powerFloat({
eventType: "click",
targetMode: "ajax",
targetAttr: "src",
container: $("#customContainer"),
reverseSharp: true
});
自定义容器装载页面元素:
HTML代码:
JS代码:$("#trigger13").powerFloat({
eventType: "click",
targetMode: null,
targetAttr: "src",
container: $("#customContainer")
});
六、鼠标跟随效果
缩略图显示大图,同时鼠标跟随(垂直方向):CSS代码:.dib { display: inline-block; }
HTML代码:
JS代码:$("#trigger14").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "y",
position: "6-8"
});
缩略图显示大图,同时鼠标跟随(水平方向):
CSS代码:.dib { display: inline-block; }
HTML代码:
JS代码:$("#trigger15").powerFloat({
targetMode: "ajax",
targetAttr: "href",
hoverFollow: "x",
hoverHold: false,
position: "5-7"
}); http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html
相关文章推荐
- jQuery万能浮动框插件测试
- Jenkins插件及 测试源码
- 配置Thunderbird支持msn邮箱,无需webmail插件(测试通过)
- chrome插件 测试 接口利器 postman ,firefox 微信接口 淘宝api 测试利器 poster
- eclipse中加入myeclipse插件开发J2EE(测试可用转)
- QuickTest 的 Flex 测试插件
- 为插件创建测试(Creating Tests for Plugins)
- Java并发测试扩展插件JunitPerf的使用
- Maven中测试插件(surefire)的相关配置及常用方法
- 测试一下代码高亮插件
- [数据库测试]强烈推荐一个python ODBC数据源插件,可支持Oracle,Db2,Mysql,Sql-server以及各种数据库版本,附例子和测试程序
- 使用Firefox的“HttpRequester”插件测试REST风格的webservice
- web的自动化测试插件Selenium-IDE插件的安装使用
- BurpSuite中的安全测试插件推荐
- 代码插件测试
- 用fiddler进行安全性测试——X5S插件
- 网络请求工具,post,get等谷歌浏览器测试插件,很好用
- 用Selenium RC插件测试远程应用
- 测试高亮插件
- Hadoop—在Eclipse中安装Hadoop插件及测试(Linux操作系统)--练习6