• layer.js,,,分享一个好用的弹出层


    基本属性:

    <!DOCTYPE html>
    <html>
        <head>
            <head>
            <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
            <link rel="stylesheet" href="css/layer.css" media="all">
            <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
            <script src="js/layer.js"></script>
        </head>
        </head>
        <body>
            <div class="clear box layer-main">
                <a href="javascript:;" onclick="test();">点我弹窗</a>
            </div>        
        </body>
        <script>
        function test() {
            //在这里面输入任何合法的js语句
            layer.open({
                type: 1,
                //page层
                area: ['70%', '30%'],
                title: '弹出框',
                shade: 0.6,//遮罩透明度
                shadeClose:true,//点击遮罩关闭层
                moveType: 1,//拖拽风格,0是默认,1是传统拖动
                shift: 1,//0-6的动画形式,-1不开启
                fix:true,//不随滚动条滚动,一直在可视区域。
                border:[0],
                closeBtn:[1,true],
                content: '<div style="padding:10px;">这是一个非常普通的页面层,可以传入内容</div>',
                btn:['确定','取消']
            });
        }
    </script>
    </html>

    我是为了测试移动端效果,才加的meta标签,可以去掉。体验pc端的效果。个人感觉pc端效果更好,移动端可以将就这用。

    键: 值 描述
    下表的属性都是默认值,您可在调用时按需重新配置,他们可帮助你实现各式各样的风格。如是调用: $.layer({键: 值, 键: 值, …});
    type: 0 层的类型。0:信息框(默认),1:页面层,2:iframe层,3:加载层,4:tips层。

    此为重要参数,不同类型层的总开关,若为type:0则不需要配置,其它类型层在调用时必须设置type。

    title: '信息' 控制默认标题栏。 
    如想自定义标题样式,可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css 
    如不想显示标题栏,配置title: false 即可
    maxmin: false 是否输出窗口最小化/全屏/还原按钮。 
    如需要开启,设置maxmin: true 即可 
    此功能为layer1.8开始新增
    offset: ['', ''] 控制层坐标。
    offset的值分别是: [纵坐标, 横坐标],默认为垂直水平居中
    如果您要设定纵坐标,可以:offset:['200px', '']/td>
    area: ['310px', '130px'] 控制层宽高。
    area值分别为:[宽度, 高度]
    当设置为auto时,意味着采用自适应(iframe层不能设置auto), 对于宽度,并不推荐您设置auto。
    border: [10, 0.3, '#000'] 控制层的边框。
    border的值分别为:[边框大小, 透明度, 颜色, layer1.8之前需在此处加true]
    如果您不想显示border,设置 border: [0] 即可
    shade: [0.5, '#000'] 控制遮罩。
    值分别是:[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 
    如果不想显示遮罩,配置shade: [0]即可
    shadeClose: false 用来控制点击遮罩区域是否关闭层。
    若开启,设为true即可
    closeBtn: [0, true] 控制层右上角关闭按钮。
    closeBtn的值分别为: [关闭按钮的风格(支持0和1), true]
    若不想显示关闭按钮,配置 closeBtn: false即可
    time: 0 自动关闭等待秒数,整数值。
    0表示不自动关闭,若3秒后自动关闭,time: 3即可
    fix: true, 用于设定层是否不随滚动条而滚动,固定在可视区域。
    move: '.xubox_title' 设定某个元素来实现对层的拖拽。
    值为:用来拖拽的元素选择器
    若不想拖拽,move: false即可
    moveOut: false 用于控制层是否允许被拖出可视窗口外
    moveType: 0 用于配置拖拽类型(layer1.7之前版本不支持)
    默认为引导式拖动层,若值设为1,则直接拖动层
    bgcolor: '#fff' 用于控制层的背景色
    如果不想设置任何颜色,设置空字符即可。但是对于type:0的对话框层而言,始终都是白色
    zIndex: 19891014 控制层堆叠顺序(即css的z-index)。整数值。
    合理设置它,可以避免与其它插件的层级冲突
    maxWidth: 400 最大宽度。整数值。
    当area宽度设为auto时才有用。
    fadeIn: 300, 用于控制层渐显弹出(layer1.7之前版本不支持)
    值为毫秒数
    btns: 1, 按钮的个数。提供了0-2的选择,设置0表示不输出按钮
    btn: ['确定', '取消'], [按钮一的文本值 , 按钮二的文本值]
    必须btns值大于0才有效
    shift: '', 用于控制动画弹出
    有七种选择:左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。
    如shift:'top' 表示从上动画弹出
    dialog: {
        type: 3,
        msg: ''
    }
                        
    信息框层模式提供的私有参数。使用时,按需配置即可 
    type: 图标类型,提供了0-16的选择,也许有你喜欢的。 设置-1不显示图标 
    msg: 信息框内容,重要参数
    page: {
    	dom: '#id', 
    	html: '',
    	url: '',
    	ok: function(datas){}
    }
    					
    页面层模式私有参数。 
    dom: 页面已存在的选择器 
    html: 直接传入的html字符串。 
    url: ajax请求地址。 
    ok: ajax请求完毕后执行的回调,datas是异步传递过来的值。 
    需要特别注意的是,dom、html、url只需设定其中一个就行,若配置html或url,你必须也配置宽高值。
    iframe: {
        src: '',
        scrolling: 'auto'
    }
    					
    iframe层模式私有参数。 
    src: 要打开的网址。 
    scrolling: 是否允许iframe出现滚动条,默认自动。允许:'yes',不允许:'no'
    loading: {
        type: 0
    }
                        
    加载层私有属性。 
    type: loading图标类型(提供了0-3的选择)。 
    一般配合ajax使用
    tips : {
        msg: '',
        follow: '#id',
    	guide: 0,
    	isGuide: true,
        more: false,
    	style: ['', '']
    }          
                        
    tips提示层私有属性。 
    msg: 提示内容。 
    follow: 吸附目标选择器。 
    guide: 指引方向(0:上,1:右,2:下,3:左)。 
    isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon 
    more: 是否允许多个tips 
    style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值,为三角形的颜色。
    回调函数
    success: function(layero){
    
    }
                        
    层弹出成功后的回调函数. 
    layero是回调传过来的当前层容器的实例,这意味着你可以对当前弹层进行dom操作
    yes: function(index){}
                        
    按钮一的回调函数 
    index为当前层的索引,主要用来回调执行后,配合layer.close(index)来关闭层
    no: function(index){}
                        
    按钮二的回调函数
    close: function(index){}
                        
    层右上角关闭按钮的点击事件触发回调函数。
    end: function(){}
                        
    层被彻底关闭后执行的回调函数。
    moveEnd: function(){}
                        
    拖拽完毕触发的回调函数
    min: function(layero){},
    full: function(layero){},
    restore: function(layero){}
                        
    分别为最小化、全屏、还原触发后的回调函数 
    layero是当前层容器的实例 
    layer1.8开始新增

    下面这些是为了凑字数:

    <!DOCTYPE html>
    <html>
    <head>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="css/layer.css" media="all">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script src="js/layer.js"></script>
    </head>
    </head>
    <body>
    <div class="clear box layer-main">
    <a href="javascript:;" onclick="test();">点我弹窗</a>
    </div>
    </body>
    <script>
    function test() {
    //在这里面输入任何合法的js语句
    layer.open({
    type: 1,
    //page层
    area: ['70%', '30%'],
    title: '弹出框',
    shade: 0.6,//遮罩透明度
    shadeClose:true,//点击遮罩关闭层
    moveType: 1,//拖拽风格,0是默认,1是传统拖动
    shift: 1,//0-6的动画形式,-1不开启
    fix:true,//不随滚动条滚动,一直在可视区域。
    border:[0],
    closeBtn:[1,true],
    content: '<div style="padding:10px;">这是一个非常普通的页面层,可以传入内容</div>',
    btn:['确定','取消']
    });
    }
    </script>
    </html>

  • 相关阅读:
    查看串口设备
    JavaScript 闭包
    JS中decodeURI()与decodeURIComponent()
    js 获取浏览器高度和宽度值(多浏览器)
    几种常用网页返回顶部代码
    CSS3 Transition
    jquery操作css
    如何改变hr的颜色
    标签导航——display属性
    思考性能问题
  • 原文地址:https://www.cnblogs.com/xiuber/p/5606850.html
Copyright © 2020-2023  润新知