`

jQuery万能浮动框插件测试

 
阅读更多

jQuery万能浮动框插件测试

http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html

一、加载页面上元素

默认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代码:&lt;div id="customContainer" class="custom_container"&gt;&lt;/div&gt; &lt;input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="点击我" /&gt;
JS代码:$("#trigger12").powerFloat({ eventType: "click", targetMode: "ajax", targetAttr: "src", container: $("#customContainer"), reverseSharp: true });

自定义容器装载页面元素:

HTML代码:&lt;input id="trigger13" type="button" src="targetBox" value="点击我" /&gt;
JS代码:$("#trigger13").powerFloat({ eventType: "click", targetMode: null, targetAttr: "src", container: $("#customContainer") });

六、鼠标跟随效果

缩略图显示大图,同时鼠标跟随(垂直方向):

CSS代码:.dib { display: inline-block; }
HTML代码:&lt;a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"&gt; &lt;img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /&gt; &lt;/a&gt;
JS代码:$("#trigger14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8" });

缩略图显示大图,同时鼠标跟随(水平方向):

CSS代码:.dib { display: inline-block; }
HTML代码:&lt;a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"&gt; &lt;img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /&gt; &lt;/a&gt;
JS代码:$("#trigger15").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "x", hoverHold: false, position: "5-7" });
分享到:
评论

相关推荐

    jQuery万能浮动框插件

    jQuery万能浮动框插件是一种基于JavaScript库jQuery的交互式用户界面组件,它允许开发者创建在页面上浮动的对话框或者提示框。这种插件在网页设计中非常常见,用于显示警告、信息、确认对话框,甚至承载复杂的内容...

    jQuery万能浮动框插件jquery-powerFloat

    **jQuery万能浮动框插件jquery-powerFloat**是一款强大的JavaScript插件,专为网页设计者和开发者提供方便快捷的浮动效果实现。它基于流行的jQuery库,使得在网页中添加浮动图片、文字或者其他元素变得轻而易举。这...

    jQuery万能浮动框插件,REL属性、鼠标跟随等效果.rar

    jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例, 1、加载页面上元素。 2、Ajax加载外部元素,加载外部HTML片段,加载外部页面数据。 3、下拉列表的显示,这里分纯文字...

    jquery-powerFloat(jQuery万能浮动框插件).zip

    《jQuery PowerFloat:万能浮动框插件详解与应用实践》 在Web开发领域,jQuery以其易用性和强大的功能深受开发者喜爱。而jQuery PowerFloat插件则是jQuery库中的一款高效工具,它专为创建浮动框效果而设计,适用于...

    jquery万能浮动层提示框插件图片、文字、表单文字提示等提示框

    《jQuery万能浮动层提示框插件:实现高效交互与信息提示》 在网页开发中,用户交互体验是至关重要的,而提示框则是提升用户体验的关键元素之一。jQuery万能浮动层提示框插件,以其强大的功能和灵活的使用方式,为...

    jquery万能浮动层

    《jQuery万能浮动层》是基于JavaScript库jQuery实现的一种高效、灵活的弹出层解决方案,主要应用于网页中的提示、对话框、广告等需要浮动显示的元素。它利用jQuery的事件处理、选择器以及DOM操作等功能,实现了层的...

    自写的jQuery万能浮动框调用插件,附有实例

    内容索引:脚本资源,jQuery,浮动框,jQuery插件 jquery-powerFloat,国内Js高人自写的jQuery万能浮动框插件,附有6种效果的浮动框调用实例,  1、加载页面上元素。  2、Ajax加载外部元素,加载外部HTML片段,加载...

    jquery UI万能浮动

    **jQuery UI:万能浮动组件** jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果和可自定义的主题,适用于构建功能完善的Web应用程序。标题中的“万能浮动”可能指的是jQuery ...

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

    jQuery powerFloat是一款强大的浮动层插件,主要用于创建与页面元素关联的浮动效果,如提示层、下拉列表、鼠标经过显示大图等。该插件的设计初衷是为了避免重复编写相似功能的代码,提高开发效率。插件的核心在于...

    python入门到高级全栈工程师培训 第3期 附课件代码

    07 jquery扩展与插件 08 jquery扩展补充 09 本周作业轮播图以及思路 第45章 轮播图片css部分 轮播图片js部分 第46章 01 数据库与dbms的概念 02 sql规范 03 数据库操作DDL 04 python s3 day46 mysql的数据类型 05...

Global site tag (gtag.js) - Google Analytics