• js弹出层插件 -- weebox


    1.引入文件:   使用前需包含以下jquery.js、bgiframe.js、weebox.js、wee.css文件

    2.基本用法举例如下: 

    <script type="text/javascript">
    $.weeboxs.open('#testbox', {
        title: 'hello world', 
        400, 
        height: 200
    });
    
    $.weeboxs.open('The operation failed.',{
        onopen:function(){
            alert('opened!');
        },
        onclose:function(){
            alert('closed!');
        }, 
        onok:function(){
            alert('ok');
            $.weeboxs.close();
        } 
    });
    
    $.weeboxs.open('/modules/test/testsession.php', {
        contentType:'ajax'
    });
    
    $.weeboxs.open('hello world');
    $.weeboxs.open('The operation failed.',{type:'error'});
    $.weeboxs.open('The operation failed.',{type:'wee'});
    $.weeboxs.open('The operation failed.',{type:'success'});
    $.weeboxs.open('The operation failed.',{type:'warning'});
    $.weeboxs.open('Autoclosing in 5 seconds.', { timeout: 5 });
    </script>
    

    3.以下是默认选项: boxid: null, //设定了此值只后,以后在打开同样boxid的弹窗时,前一个将被自动关闭 boxclass: null, //给弹窗设置其它的样式,用此可以改变弹窗的样式 type: 'dialog', //弹窗类型,目前有dialog,error,warning,success,wee,prompt,box六种 title: '', //弹窗标题 0, //弹窗宽度,不设时,会自动依据内容改变大小 height: 0, //弹窗高度(注意是内容的高度,不是弹窗的高度) timeout: 0, //自动关闭的秒数,设置此值后,窗口将自动关闭 draggable: true,//是否可以拖拽 modal: true, //是否显示遮照 overlay: 75, //遮照透明度 focus: null, //弹窗打开后,焦点移到什么元素上,默认移到取消按钮到 position: 'center',//弹窗打开后的默认为中间,设置为element时,需要设置trager选项, trigger: null, //显示位置的参照元素,为一个元素id showTitle: true,//是否显示标题 showButton: true,//是否显示按钮,包括确定和取消 showCancel: true, //是否显示取消按钮 showOk: true, //是否显示确定按钮 okBtnName: '确定',//"确定"按钮名称 cancelBtnName: '取消',//"取消"按钮名称 contentType: 'text',//内容获取方式,目前有三种text,selector,ajax contentChange: false,//为selector时 clickClose: false, //点击不在弹窗上时,是否关闭弹窗 zIndex: 999,//默认弹窗的层 animate: false,//效果显示 onclose: null, //弹窗关闭时触发的函数 onopen: null, //弹窗显示前触发的函数, 此时内容已经放入弹窗中,不过还没有显示出来 onok: null //点击确定按钮触发的函数

    疑难杂症问题:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="weebox/jquery.min.js"></script>
    <script type="text/javascript" src="weebox/bgiframe.js"></script>
    <script type="text/javascript" src="weebox/weebox.js"></script>
    <link type="text/css" rel="stylesheet" href="weebox/weebox.css" />
    <script type="text/javascript">
        function get()
        {
            $.weeboxs.open('users.php', {
                title:'请选择:', 
                contentType:'ajax',
                800,
                height:800,
                onok:function(box){
                        var text = "";
                        var sumEmail = 0;
                        var textView = "";
                        $("input[name='invitees[]']:checked").each(function() {             
                            text += ","+$(this).val();  
                        });
                        //$.post("1.php",{'email':text});
                        sumEmail = $("input[name='invitees[]']:checked").length;
                        $("#invite").text('共邀请'+sumEmail+'人,名单如下:');
                        $("#email").val(text);
                        textView = text.substr(1).replace(new RegExp(/(,)/g),"; ");
                        $("#emailView").html(textView);
                        //window.close();正常情况下这里这样写是可以的,但是有时候竟然要加个参数box才能点
                        //确定的时候关闭窗口。
                        box.close();
                    }
            });
        }
    </script>
    </head>
    <body>
    <!-- 这里用<button onclick="get();return false;"></button>也可以,
    但是在IE8,IE9下会直接把表单给提交了。《<button></button>有自动提交表单的特性》 -->
    <input type="button" value="点此邀请" onclick="get();">
    </body>
    </html>
    
  • 相关阅读:
    [Nowcoder] 寻找子串
    [LeetCode] Generate Parentheses
    [Nowcoder] 字符串是否由字串拼接
    ananconda3中QTDesigner无法输入中文
    [Paddle学习笔记][13][基于YOLOv3的昆虫检测-测试模型]
    [Paddle学习笔记][12][基于YOLOv3的昆虫检测-模型预测]
    [Paddle学习笔记][11][基于YOLOv3的昆虫检测-训练模型]
    [Paddle学习笔记][10][基于YOLOv3的昆虫检测-损失函数]
    [Paddle学习笔记][09][基于YOLOv3的昆虫检测-模型设计]
    [Paddle学习笔记][08][基于YOLOv3的昆虫检测-数据处理]
  • 原文地址:https://www.cnblogs.com/a757956132/p/4543352.html
Copyright © 2020-2023  润新知