by zhangxinxu 2010-09-06 13:51

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

一、内置弹框

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

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();
};