文档章节

jQuery zxxbox弹出框插件(v3.0)测试页面

mickelfeng
 mickelfeng
发布于 2013/01/07 13:38
字数 1321
阅读 158
收藏 4

一、内置弹框

显示最简单的内置的信息确定提示框:点击我

JS代码:
$("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); });

带回调函数的信息确认提示框:点击我

JS代码:
$("#test2").click(function(){ $.zxxbox.remind('美国驻沪领事馆权威发布:上半年<a href="#nogo" title="上海">上海</a>赴美留学3.2万人。', function(){ alert("哇哈哈,这是回调函数显示的内容:今年上海的学生签证通过率达到了95%。去年这一数字为90%。"); }, { title: "参考消息" }); });

显示内置的询问提示框:点击我

JS代码:
$("#test3").click(function(){ $.zxxbox.ask("确认改变页面的背景色为天蓝色", function(){ $("body").css("background-color", "azure"); $.zxxbox.hide(); }, null, { title: "友情提示" }); });

二、装载页面上的元素

加载页面上一段登录的HTML:登录

HTML代码:
<div id="login" style="padding:40px; display:none;"> <p>用户名:<input id="unseName" type="text" size="20" /></p> <p class="mt10 mb10">密&nbsp;&nbsp;码:<input type="text" size="20" /></p> <p><button id="loginBtn">登录</button><button id="cancelBtn">取消</button></p> </div>
JS代码:
$("#test4").click(function(){ $("#login").zxxbox(); //或者是$.zxxbox($("#login")); });
$("#loginBtn").click(function(){ /*
     *
     一些登录操作
    *
    */ alert("登录成功!");
    $.zxxbox.hide();
});
$("#cancelBtn").click(function(){
    $.zxxbox.hide();						   
});

使用a标签的锚点加载页面元素:点击我-登录

HTML代码:
<a id="test5" href="#login">点击我-登录</a>
JS代码:
$("#test5").zxxbox();

a标签本身作为元素被加载:点击我-被装载到弹框

HTML代码:
<a href="#" class="ml10 mr10" id="test6">点击我-被装载到弹框</a>
JS代码:
$("#test6").click(function(){
    $(this).zxxbox({
        ajaxTagA: false,
        height: 80   
    });
    return false;
});

三、Ajax装载页面外的元素

a标签链接地址加载之图片:点击我-显示美女图片

HTML代码:
<a id="test7" target="_blank" href="http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg">点击我-显示美女图片</a>
JS代码:
$("#test7").zxxbox({
    bar: false,
    bgclose: true
});

a标签之加载静态页面:点击我-加载HTML静态页

HTML代码:
<a id="test8" href="html-load.html">点击我-加载HTML静态页</a>
JS代码:
$("#test8").zxxbox();

直接使用zxxbox的ajax方法加载外部数据:加载

JS代码:
$("#test9").click(function(){
    $.zxxbox.ajax("php-load.php");						   
});

四、zxxbox一些参数使用举例

不显示半透明背景层:点击我

JS代码:
$("#test10").click(function(){ $.zxxbox('<div class="wrap_remind">最近貌似《盗梦空间》很热啊!</div>', { bg: false }); });

不显示标题栏的关闭按钮:点击我

JS代码:
$("#test11").click(function(){
    $.zxxbox.remind("外滩,一对恋人,女撒娇道:亲爱的,听说过一阵要上映一个特别浪漫的电影,狄仁杰与山楂树之恋...",
        function(){ //$(this)指代当前弹框的确定按钮jQuery对象
            //禁用确定按钮 $(this).attr("disabled", "disabled");
        }, {
            btnclose: false				
    });					
});

弹框可拖拽:点击我

JS代码:
$("#test12").click(function(){
    $.zxxbox.remind("点击按住标题栏可以进行拖拽~~", null, { drag: true });					
});

弹框位置不随滚动条滚动(IE6有晃动):点击我

JS代码:
$("#test13").click(function(){
    $.zxxbox.remind("弹框的位置游离于滚动条之外~~", null, { fix: true });					
});

弹窗打开后定时关闭:点击我

JS代码:
$("#test14").click(function(){
    $.zxxbox.remind("此弹框将在3秒钟后关闭,现在倒计时3,2,1...", null, { delay: 3000 });					
});

弹窗关闭后触发回调方法:点击我

JS代码:
$("#test15").click(function(){
    $.zxxbox.remind(
        "此弹窗关闭后,页面会刷新~~",
        null,
        {
            onclose: function(){ 
                window.location.href=window.location.href;
            }
    });					
});

五、一些复杂情况使用举例

弹框高度会动态增加:点击我

$("#test16").click(function(){ var elements = $('<div style="width:400px; padding:20px; display:none;">与70后相比,即将步入30岁的80后大多工作还不够稳定,房子、车子似乎也是很遥远的事情,而且,这其中还有为数可观的大龄青年。在变革的社会中成长起来的80后承担着更多来自现实和心理上的双重压力。迈入而立之年的80后,自己的前方在哪里?自己又能因何而立?<br /><a id="showRelElement" href="javascript:void(0);" rel="beRelElement">显示更多>></a><div id="beRelElement" class="mt10 dn">恐怕,就连孔子也不会想到,2000多年前组合出的4个字——“三十而立”,如今会因为一个叫“80后”的群体,再度引发国人的集体思考。<br /><br />三十而立,那么,何为“立”?最通俗惯常的说法,30岁应该成家立业,有所作为。而最低的要求则是30岁的人应该能依靠自己的本领,独立承担责任,并已确定自己的人生目标与发展方向。</div></div>'); $.zxxbox(elements, { onshow: function() { protect: false, $("#showRelElement").click(function() { var rel = $(this).attr("rel"); if (rel) { $("#"+rel).slideDown(function() { $.zxxbox.setPosition(true); }); $(this).hide(); } return false; }); } }); });

多a标签加载外部元素(如图片): 加载图片1 加载图片2 加载图片3

HTML代码:
<a class="loadImage" href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg">加载图片1</a> <a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg">加载图片2</a> <a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg">加载图片3</a>
JS代码:
$(".loadImage").zxxbox({
    bar: false,
    bgclose:true
});

加载iframe并通过iframe内元素关闭弹框:点击我

父页面HTML代码(隐藏的按钮):
<input id="forTriggerHide" type="button" class="dn" />
JS代码:
$("#test17").click(function(){
    $.zxxbox($('<iframe frameborder="0" width="400" height="200" src="iframe-load.html"></iframe>'));					
});
$("#forTriggerHide").click(function(){
    $.zxxbox.hide();									
});
iframe框架页面相关HTML代码:
<input id="forTriggerHide" type="button" class="dn" />
JS代码:
document.getElementById("iframeBtn").onclick = function(){
    parent.document.getElementById("forTriggerHide").click();
};

本文转载自:http://www.zhangxinxu.com/study/201009/jquery-zxxbox-v3-demo.html

mickelfeng

mickelfeng

粉丝 237
博文 2802
码字总数 605868
作品 0
成都
高级程序员
私信 提问
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
974
3
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
823
5
jquery+flash(zclip)实现点击复制到剪切板

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得电脑安装Adobe Flash Player。 ...

东子
2014/09/20
3.3K
2
2012年度最新的10个原创Jquery插件

漫画原创名片提示框Jquery插件最初版 此Jquery插件是一款非常实用的功能,像微博和一些大平台的会员信息都是以名片示的弹出层显示,今天把它封装成一个插件分享给大家用,这是最初版本功能已...

邓剑彬
2012/11/29
42
0
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 21世纪开...

晨曦之光
2012/03/09
452
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 —— 葛优理论+1

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享米津玄師的单曲《LOSER》: mv中的舞蹈诡异却又美丽,如此随性怕是难再跳出第二次…… 《LOSER》-...

小小编辑
47分钟前
46
2
nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
14
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
14
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部