jQuery万能浮动框插件测试
http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html
一、加载页面上元素
HTML代码:<a id="trigger1" href="javascript:;" rel="targetBox">默认rel加载</a>
JS代码:$("#trigger1").powerFloat();
HTML代码:<a id="trigger2" href="###">target参数加载</a>
JS代码:$("#trigger2").powerFloat({
target: $("#targetBox")
});
HTML代码:<a id="trigger3" href="###">target参数为选择器</a>
JS代码:$("#trigger3").powerFloat({
target: ".target_box"
});
二、Ajax加载外部元素
HTML代码:<a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel属性显示图片</a>
JS代码:$("#trigger4").powerFloat({
targetMode: "ajax"
});
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);
四、自定义浮动提示
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"
});
发表评论
-
iframe 跨站自适应高度
2015-04-03 16:07 525要在a.com/a.html 中 包含 b.com/b.h ... -
JavaScript 开发的几个经典技巧
2015-03-30 15:54 585JavaScript 开发的45个经典技巧 原文链接 ... -
js 中的算术运算
2015-03-24 17:15 503js 中的算术运算 -
jquery 元素查找同级 父级
2014-11-03 13:47 818遍历节点 $(this).parent() //取到当 ... -
echarts 百度图表
2014-07-30 15:27 859http://echarts.baidu.com/doc/ex ... -
RunJS
2014-05-23 09:19 639http://runjs.cn/code/ih5xzoeb -
layer,一个可以让你想到即可做到的web弹窗(层)解决方案(js组件)
2014-02-20 10:27 609http://sentsin.com/jquery/layer ... -
JQ弹出层插件(tipsWindow 3.1)
2012-11-30 09:40 1037详细的看演示页吧:http://leotheme.cn/wp- ... -
支持幻灯、相册、滚动、TAB选项卡等效果的全能jQuery特效
2012-10-25 16:40 811http://www.5icool.org/a/201202/ ... -
Jquery控制图片宽度及高度 ,做到等比例缩放
2012-08-07 15:11 5482$(document).ready(function() ... -
jquery Validform 表单验证
2012-06-13 12:53 4804Validform常用功能示例 基本功能 给表单元 ... -
表单文本框文字提示 InputDefault Query 插件
2012-06-13 12:38 1114InputDefault 是一个jQuery 插件,用 ... -
推荐10个jquery表单增强插件
2012-06-12 14:31 862推荐10个jquery表单增强插件 发布于2010年0 ... -
百度编辑器 UEditor
2012-06-11 17:31 624http://ueditor.baidu.com -
jQuery选择器大全(48个代码片段+21幅图演示)
2012-06-11 09:15 752jQuery选择器大全(48 ... -
js数组操作大全
2012-06-05 16:36 737js数组操作大全(转) shift:删除原数组第一 ... -
JS EVAL 简密工具
2012-06-05 14:50 775http://jsbeautifier.org/ -
11 个基于 JavaScript 的图表插件推荐
2012-06-01 09:49 89010 个基于 JavaScript 的图表插件 ... -
巧用javascript数组实现数据结构-堆栈与队列
2012-05-24 11:07 844巧用javascript数组实现数据结构-堆栈与队列 ... -
jquery 项目
2012-05-23 11:25 835jQuery EasyUI http://www.je ...
相关推荐
jQuery万能浮动框插件是一种基于JavaScript库jQuery的交互式用户界面组件,它允许开发者创建在页面上浮动的对话框或者提示框。这种插件在网页设计中非常常见,用于显示警告、信息、确认对话框,甚至承载复杂的内容...
**jQuery万能浮动框插件jquery-powerFloat**是一款强大的JavaScript插件,专为网页设计者和开发者提供方便快捷的浮动效果实现。它基于流行的jQuery库,使得在网页中添加浮动图片、文字或者其他元素变得轻而易举。这...
jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例, 1、加载页面上元素。 2、Ajax加载外部元素,加载外部HTML片段,加载外部页面数据。 3、下拉列表的显示,这里分纯文字...
《jQuery PowerFloat:万能浮动框插件详解与应用实践》 在Web开发领域,jQuery以其易用性和强大的功能深受开发者喜爱。而jQuery PowerFloat插件则是jQuery库中的一款高效工具,它专为创建浮动框效果而设计,适用于...
《jQuery万能浮动层提示框插件:实现高效交互与信息提示》 在网页开发中,用户交互体验是至关重要的,而提示框则是提升用户体验的关键元素之一。jQuery万能浮动层提示框插件,以其强大的功能和灵活的使用方式,为...
《jQuery万能浮动层》是基于JavaScript库jQuery实现的一种高效、灵活的弹出层解决方案,主要应用于网页中的提示、对话框、广告等需要浮动显示的元素。它利用jQuery的事件处理、选择器以及DOM操作等功能,实现了层的...
内容索引:脚本资源,jQuery,浮动框,jQuery插件 jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例, 1、加载页面上元素。 2、Ajax加载外部元素,加载外部HTML片段,加载...
**jQuery UI:万能浮动组件** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果和可自定义的主题,适用于构建功能完善的Web应用程序。标题中的“万能浮动”可能指的是jQuery ...
jQuery powerFloat是一款强大的浮动层插件,主要用于创建与页面元素关联的浮动效果,如提示层、下拉列表、鼠标经过显示大图等。该插件的设计初衷是为了避免重复编写相似功能的代码,提高开发效率。插件的核心在于...
07 jquery扩展与插件 08 jquery扩展补充 09 本周作业轮播图以及思路 第45章 轮播图片css部分 轮播图片js部分 第46章 01 数据库与dbms的概念 02 sql规范 03 数据库操作DDL 04 python s3 day46 mysql的数据类型 05...