jQuery万能浮动框插件测试
来源:互联网 发布:js修改onclick事件 编辑:程序博客网 时间:2024/05/08 17:07
by zhangxinxu 2010-12-08 15:22
jQuery万能浮动框插件测试
源文件下载.zip 17.2k
一、加载页面上元素
默认rel加载
HTML代码:
<a id="trigger1" href="javascript:;" rel="targetBox">默认rel加载</a>
JS代码:
$("#trigger1").powerFloat();
target参数加载
HTML代码:
<a id="trigger2" href="###">target参数加载</a>
JS代码:
$("#trigger2").powerFloat({ target: $("#targetBox")});
target参数为选择器
HTML代码:
<a id="trigger3" href="###">target参数为选择器</a>
JS代码:
$("#trigger3").powerFloat({ target: ".target_box"});
二、Ajax加载外部元素
rel属性显示图片
HTML代码:
<a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel属性显示图片</a>
JS代码:
$("#trigger4").powerFloat({ targetMode: "ajax"});
target参数为图片地址
HTML代码:
<a id="trigger5" href="javascript:;">target参数为图片地址</a>
JS代码:
$("#trigger5").powerFloat({ target: "http://tp3.sinaimg.cn/2305056670/180/5608200132/0", targetMode: "ajax"});
加载外部HTML片段:
HTML代码:
<button id="trigger6">点击切换显示</button>
JS代码:
$("#trigger6").powerFloat({ eventType: "click", target: "/study/201009/html-load.html", targetMode: "ajax"});
加载外部页面数据失败:
HTML代码:
<button id="trigger7">点击测试</button>
JS代码:
$("#trigger7").powerFloat({ eventType: "click", target: "http://www.baidu.com/", targetMode: "ajax"});
三、下拉列表的显示
纯文字列表下拉:
HTML代码:
<button id="trigger8">点击显示姓名列表▼</button>
JS代码:
$("#trigger8").powerFloat({ width: "inherit", eventType: "click", target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"], targetMode: "list"});
带链接的文字下拉:更多文章▼
HTML代码:
<a id="trigger9" href="/wordpress/">更多文章▼</a>
JS代码:
$("#trigger9").powerFloat({ width: 250, target: [ { href: "##", text: "这是文章1的说" }, { href: "##", text: "啊,看,文章2" }, { href: "##", text: "啊啦,不好,我把文章3忘家里了!" }, { href: "##", text: "马萨噶,这就是传说中的...文章4..." }, { href: "##", text: "什么嘛,就是文章5,害我白期待一场" } ], targetMode: "list"});
无列表数据显示
HTML代码:
<a id="trigger10" href="#">无列表数据显示</a>
JS代码:
$("#trigger10").powerFloat({ targetMode: "list"});
四、简单提示的显示
输入密码:
再次输入:
HTML代码:
输入密码:<input class="pwdTrigger" type="password" placeholder="6~20个字符" />再次输入:<input class="pwdTrigger" type="password" placeholder="输入与上面一样的密码" />
JS代码:
$(".pwdTrigger").powerFloat({ eventType: "focus", targetMode: "remind", targetAttr: "placeholder", position: "1-4"});
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等):
HTML代码:
<input id="posTrigger1" type="text" /> <button id="trigger11">确定</button>
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代码:
<a class="tipTrigger" href="###" tip="摸我">摸我</a><a class="tipTrigger" href="###" tip="我也要">我也要</a><a class="tipTrigger" href="###" tip="还有我">还有我</a>
JS代码:
$(".tipTrigger").powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: "tip", targetAttr: "tip", position: "3-4"});
右上角固定位置的操作提示层(ajax请求中提示,页面跳转中提示等):
HTML代码:
<span id="targetFixed" class="target_fixed"></span><button class="operateTrigger">登录</button><button class="operateTrigger">提交</button><button class="operateTrigger">刷新</button>
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代码:
<div id="customContainer" class="custom_container"></div><input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="点击我" />
JS代码:
$("#trigger12").powerFloat({ eventType: "click", targetMode: "ajax", targetAttr: "src", container: $("#customContainer"), reverseSharp: true});
自定义容器装载页面元素:
HTML代码:
<input id="trigger13" type="button" src="targetBox" value="点击我" />
JS代码:
$("#trigger13").powerFloat({ eventType: "click", targetMode: null, targetAttr: "src", container: $("#customContainer")});
六、鼠标跟随效果
缩略图显示大图,同时鼠标跟随(垂直方向):
CSS代码:
.dib { display: inline-block; }
HTML代码:
<a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
JS代码:
$("#trigger14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8"});
缩略图显示大图,同时鼠标跟随(水平方向):
CSS代码:
.dib { display: inline-block; }
HTML代码:
<a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
JS代码:
$("#trigger15").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "x", hoverHold: false, position: "5-7"});<div class="zxx_header" style="padding: 10px 20px 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); overflow: hidden; zoom: 1; color: rgb(51, 51, 51); font-family: Verdana, Geneva, sans-serif; font-size: 13px; "><a href="http://www.zhangxinxu.com/" style="color: rgb(52, 83, 139); "><img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" style="border: 0px; float: left; " alt="" /></a><span class="zxx_author_time" style="float: right; margin-top: 34px; color: rgb(120, 120, 120); font-family: 'Courier New', Courier, monospace; ">by zhangxinxu 2010-12-08 15:22</span></div><h1 class="zxx_title" style="padding: 0px; margin: 20px 0px; list-style-type: none; font-size: 1.6em; text-align: center; color: rgb(51, 51, 51); font-family: Verdana, Geneva, sans-serif; ">jQuery万能浮动框插件测试</h1><div class="tr" style="text-align: right; color: rgb(51, 51, 51); font-family: Verdana, Geneva, sans-serif; font-size: 13px; "><span class="zxx_btn" style="display: inline-block; background-image: url(http://www.zhangxinxu.com/study/image/down_btn.png); padding-left: 25px; background-position: initial initial; background-repeat: no-repeat no-repeat; "><a href="http://www.zhangxinxu.com/study/down/jquery-powerFloat.zip" style="color: rgb(52, 83, 139); display: inline-block; height: 45px; line-height: 45px; background-image: url(http://www.zhangxinxu.com/study/image/down_btn.png); padding: 0px 45px 0px 20px; cursor: pointer; background-position: 100% 0%; background-repeat: no-repeat no-repeat; ">源文件下载.zip 17.2k</a></span></div><div class="zxx_main_con" style="min-height: 580px; padding: 0px 20px 20px; color: rgb(51, 51, 51); font-family: Verdana, Geneva, sans-serif; font-size: 13px; "><div class="zxx_test_list" style="padding: 1em; font-size: 1.1em; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(204, 204, 204); line-height: 1.3; overflow: hidden; zoom: 1; "><h4 class="mb10 f11" style="padding: 0px; margin: 0px 0px 10px; list-style-type: none; font-size: 1.1em; ">一、加载页面上元素</h4><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; list-style-type: none; "><a id="trigger1" href="http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html" rel="targetBox" style="color: rgb(52, 83, 139); ">默认rel加载</a></p><div class="zxx_code" style="padding: 10px; margin: 5px 0px; background-color: rgb(238, 238, 238); border: 1px dashed rgb(204, 204, 204); clear: both; zoom: 1; "><span class="db mb5 f9" style="margin-bottom: 5px; font-size: 0.9em; display: block; "><strong>HTML代码:</strong></span><xmp style="margin-top: 0px; margin-bottom: 0px; color: rgb(0, 0, 255); font-size: 12px; white-space: pre-wrap; word-wrap: break-word; "><a id="trigger1" href="javascript:;" rel="targetBox">默认rel加载</a>
JS代码:
$("#trigger1").powerFloat();
target参数加载
HTML代码:
<a id="trigger2" href="###">target参数加载</a>
JS代码:
$("#trigger2").powerFloat({ target: $("#targetBox")});
target参数为选择器
HTML代码:
<a id="trigger3" href="###">target参数为选择器</a>
JS代码:
$("#trigger3").powerFloat({ target: ".target_box"});
二、Ajax加载外部元素
rel属性显示图片
HTML代码:
<a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel属性显示图片</a>
JS代码:
$("#trigger4").powerFloat({ targetMode: "ajax"});
target参数为图片地址
HTML代码:
<a id="trigger5" href="javascript:;">target参数为图片地址</a>
JS代码:
$("#trigger5").powerFloat({ target: "http://tp3.sinaimg.cn/2305056670/180/5608200132/0", targetMode: "ajax"});
加载外部HTML片段:
HTML代码:
<button id="trigger6">点击切换显示</button>
JS代码:
$("#trigger6").powerFloat({ eventType: "click", target: "/study/201009/html-load.html", targetMode: "ajax"});
加载外部页面数据失败:
HTML代码:
<button id="trigger7">点击测试</button>
JS代码:
$("#trigger7").powerFloat({ eventType: "click", target: "http://www.baidu.com/", targetMode: "ajax"});
三、下拉列表的显示
纯文字列表下拉:
HTML代码:
<button id="trigger8">点击显示姓名列表▼</button>
JS代码:
$("#trigger8").powerFloat({ width: "inherit", eventType: "click", target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"], targetMode: "list"});
带链接的文字下拉:更多文章▼
HTML代码:
<a id="trigger9" href="/wordpress/">更多文章▼</a>
JS代码:
$("#trigger9").powerFloat({ width: 250, target: [ { href: "##", text: "这是文章1的说" }, { href: "##", text: "啊,看,文章2" }, { href: "##", text: "啊啦,不好,我把文章3忘家里了!" }, { href: "##", text: "马萨噶,这就是传说中的...文章4..." }, { href: "##", text: "什么嘛,就是文章5,害我白期待一场" } ], targetMode: "list"});
无列表数据显示
HTML代码:
<a id="trigger10" href="#">无列表数据显示</a>
JS代码:
$("#trigger10").powerFloat({ targetMode: "list"});
四、简单提示的显示
输入密码:
再次输入:
HTML代码:
输入密码:<input class="pwdTrigger" type="password" placeholder="6~20个字符" />再次输入:<input class="pwdTrigger" type="password" placeholder="输入与上面一样的密码" />
JS代码:
$(".pwdTrigger").powerFloat({ eventType: "focus", targetMode: "remind", targetAttr: "placeholder", position: "1-4"});
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等):
HTML代码:
<input id="posTrigger1" type="text" /> <button id="trigger11">确定</button>
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代码:
<a class="tipTrigger" href="###" tip="摸我">摸我</a><a class="tipTrigger" href="###" tip="我也要">我也要</a><a class="tipTrigger" href="###" tip="还有我">还有我</a>
JS代码:
$(".tipTrigger").powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: "tip", targetAttr: "tip", position: "3-4"});
右上角固定位置的操作提示层(ajax请求中提示,页面跳转中提示等):
HTML代码:
<span id="targetFixed" class="target_fixed"></span><button class="operateTrigger">登录</button><button class="operateTrigger">提交</button><button class="operateTrigger">刷新</button>
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代码:
<div id="customContainer" class="custom_container"></div><input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="点击我" />
JS代码:
$("#trigger12").powerFloat({ eventType: "click", targetMode: "ajax", targetAttr: "src", container: $("#customContainer"), reverseSharp: true});
自定义容器装载页面元素:
HTML代码:
<input id="trigger13" type="button" src="targetBox" value="点击我" />
JS代码:
$("#trigger13").powerFloat({ eventType: "click", targetMode: null, targetAttr: "src", container: $("#customContainer")});
六、鼠标跟随效果
缩略图显示大图,同时鼠标跟随(垂直方向):
CSS代码:
.dib { display: inline-block; }
HTML代码:
<a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
JS代码:
$("#trigger14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8"});
缩略图显示大图,同时鼠标跟随(水平方向):
CSS代码:
.dib { display: inline-block; }
HTML代码:
<a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
JS代码:
$("#trigger15").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "x", hoverHold: false, position: "5-7"});
- jQuery万能浮动框插件测试
- jQuery万能浮动框插件测试
- jQuery万能浮动框插件测试
- jQuery万能浮动框插件测试
- jQuery万能浮动框插件
- jQuery powerFloat万能浮动层下拉层插件
- jQuery powerFloat万能浮动层下拉层插件
- 【web前端】jQuery powerFloat万能浮动层下拉层插件
- jQuery插件封装:浮动div模式框
- Jquery浮动层插件
- jquery广告浮动插件
- 浮动留言板(jQuery 插件+Ajax)
- jQuery powerSwitch万能slide(切换)插件
- jQuery powerSwitch万能slide(切换)插件
- jquery插件:任意位置浮动固定层
- jquery插件任意位置浮动固定层
- CSS 万能清除浮动
- css万能清楚浮动
- TOMCAT连接池(MYSQL)配置步骤
- arm-linux-uboot-virt-intel-相关的手册名字,方便以后查找
- S3C2440串口通讯实现
- Oracle 占用cpu过高的处理办法
- C++之string
- jQuery万能浮动框插件测试
- 编译ldd3的scullc模块出现的问题
- c#向Oracle数据库中插入数据, 出现乱码问题, oracle11g(版本11.2)
- tomcat+nginx windows环境
- 继承了BaseAdapter,当在ListView单击时,获取该行里面的指定值的方法。
- 在javascript中利用window.external调用C++代码,调用VC函数
- arm 初级笔记
- android获取本机号码,版本号,手机型号
- Android系统的OS界面学习