layer弹出框插件参数及方法介绍

layerui下载:http://www.layui.com

更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html

Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发

1.引入js 和css

 <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
 <script type="text/javascript" src="layui.all.js"></script>
 <link rel="stylesheet" href="css/layui.css">

  

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="layui.all.js"></script>
    <link rel="stylesheet" href="css/layui.css">
</head>
<body>
<div id="one">
    <input type="button" value="确定">
    <input id="b3" type="button" value="确定">
</div>
<script>
    //    layer.msg('hello');
    //    layer.msg('不开心。。', {icon: 5});
//    layer.confirm('纳尼?', {//自定义弹出框
//        btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
//        , btn3: function (index, layero) {
//            //按钮【按钮三】的回调
//            alert(333)
//        }
//    }, function (index, layero) {
//        //按钮【按钮一】的回调
//        alert(111)
//    }, function (index) {
//        //按钮【按钮二】的回调
//        alert(222)
//    });

    $('input').click(function () {

        layer.open({
            id:0,//用于控制弹层唯一标识
            area: ['600px', '400px'],
//            offset: 'lt',//设置弹出框的位置
            type:2,//layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
            closeBtn:1,//设置关闭按钮默认1 可设置参数0 1 2
            shade:0.3,//遮罩 :0.3
            shadeClose:false,//是否点击遮罩关闭 ,默认false
//            time:5000,//自动关闭所需毫秒 默认:0 默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,
            anim:0,//弹出动画目前anim可支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可。另外需要注意的是,3.0之前的版本用的是 shift 参数
            isOutAnim:true,//关闭动画 (layer 3.0.3新增) 默认情况下,关闭层时会有一个过度动画。如果你不想开启,设置 isOutAnim: false 即可
            maxmin:false,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
            fixed:true,//即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可
            resize:false,//默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效
            scrollbar:true,//是否允许浏览器出现滚动条 默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽
            maxWidth:500,//默认:360 请注意:只有当area: 'auto'时,maxWidth的设定才有效。
            maxHeight:800,// 默认:无 请注意:只有当高度自适应时,maxHeight的设定才有效。
            zIndex:19891014,//默认:19891014 一般用于解决和其它组件的层叠冲突。
            move:'.layui-layer-title',// 触发拖动的元素 默认:'.layui-layer-title'  默认是触发标题区域拖拽。如果你想单独定义,指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽
//            yes:function (index, layero) {//确定按钮回调方法 该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:
//               alert("确定后要做的事情");
//                layer.close(index); //如果设定了yes回调,需进行手工关闭
//            },
            cancel:function (index, layero) {//右上角关闭按钮触发的回调 该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可
                if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭 设置 type:2  closeBtn:2,
                    layer.close(index)
                }
                return false;
            },
            resizing:function () {
                alert(111111)
            },
            title: "查看文章",
            content: 'user.html',//这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content:
//             success:function () {//层弹出后的成功回调方法
//              alert("窗口弹出成功了!");
//            }
        });
    });
    //方法大全
    //layer.open(options) - 原始核心方法
    //-----------------------------------------------------------------------------------------------------
    //1.layer.alert(content, options, yes) - 普通信息框 它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,
    // 但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可
//    layer.alert('有了回调', function(index){
//        //do something
//        alert(1111);
//        layer.close(index);
//    });
    //-----------------------------------------------------------------------------------------------------
    //2.layer.confirm(content, options, yes, cancel) - 询问框  类似系统confirm,但却远胜confirm,
    // 另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。
//    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
//        //do something
//
//        layer.close(index);
//    });
    //-----------------------------------------------------------------------------------------------------
    //3. layer.msg(content, options, end) - 提示框 我们在源码中用了相对较大的篇幅来定制了这个msg,
    // 目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。
    // 因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。
    // 因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。
    //eg1
//    layer.msg('只想弱弱提示');
    //eg2
//    layer.msg('有表情地提示', {icon: 6});
    //eg3
//    layer.msg('关闭后想做些什么', function(){
//        //do something
//    });
    //eg
//    layer.msg('同上', {
//        icon: 1,
//        time: 2000 //2秒关闭(如果不配置,默认是3秒)
//    }, function(){
//        //do something
//    });
    //-----------------------------------------------------------------------------------------------------
    //4.layer.load(icon, options) - 加载层 type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,
    // 你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。
    //eg1
//    var index = layer.load();
    //eg2
//    var index = layer.load(1); //换了种风格
    //eg3
//    var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒
    //关闭
//    layer.close(index);
    //-----------------------------------------------------------------------------------------------------
    //layer.tips(content, follow, options) - tips层 type:4的深度定制。也是我本人比较喜欢的一个层类型,
    // 因为它拥有和msg一样的低调和自觉,而且会智能定位,即灵活地判断它应该出现在哪边。默认是在元素右边弹出
    //eg1
//    layer.tips('只想提示地精准些', '#b3');
    //eg 2
//    $('#b3').on('click', function(){
//        var that = this;
//        layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可
//    });
    //eg 3
//    layer.tips('在上面', '#b3', {
//        tips: 1
//    });
    //-----------------------------------------------------------------------------------------------------
    //layer.prompt(options, yes) - 输入层 prompt的参数也是向前补齐的。options不仅可支持传入基础参数,还可以传入prompt专用的属性。当然,
    // 也可以不传。yes携带value 表单值index 索引elem 表单元素
//    layer.prompt(function(value, index, elem){
//        alert(value); //得到value
//        layer.close(index);
//    });
    //-----------------------------------------------------------------------------------------------------
    //layer.tab(options) - tab层  tab层只单独定制了一个成员,即tab: [],例子
//    layer.tab({
//        area: ['600px', '300px'],
//        tab: [{
//            title: 'TAB1',
//            content: '内容1'
//        }, {
//            title: 'TAB2',
//            content: '内容2'
//        }, {
//            title: 'TAB3',
//            content: '内容3'
//        }]
//    });
    //-----------------------------------------------------------------------------------------------------
    //layer.setTop(layero) -置顶当前窗口 非常强大的一个方法,虽然一般很少用。但是当你的页面有很多很多layer窗口,
    // 你需要像Window窗体那样,点击某个窗口,该窗体就置顶在上面,那么setTop可以来轻松实现。它采用巧妙的逻辑,以使这种置顶的性能达到最优
//    layer.open({
//        type: 2,
//        shade: false,
//        area: '500px',
//        maxmin: true,
//        content: 'http://www.layui.com',
//        zIndex: layer.zIndex, //重点1
//        success: function(layero){
//            layer.setTop(layero); //重点2
//        }
//    });

</script>
</body>
</html>

  

posted @ 2017-08-28 19:38  *小嘻嘻*  阅读(5371)  评论(0编辑  收藏  举报