layui常用的弹出层的使用,以及jquery的ajax请求

监听div中的按钮,然后弹出confirm验证弹窗

在head中加载一下layui的js cdn

在使用layui.confirm的弹框的时候可以注意到回调函数那里有个index下标,这个下标默认情况下是confirm返回的index,是layer自己的索引,不是你元素上的,你要获取元素上的。需要
$(this).index() 来获取

<script src="https://www.layuicdn.com/auto/layui.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://www.layuicdn.com/auto/layui.js"></script>
<title>你好世界(runoob.com)</title>
</head>
<body>
	<p>你好世界!</p>

	<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">

		<button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>

	</div>

<script>
	layui.use(['layer'],function(){
		var $ = layui.jquery
		,layer = layui.layer;			
		$('#layerDemo .layui-btn').on('click', function(){
			layer.confirm('is not?', function(index){
			//do something
			layer.msg("test confirm true then do something");
			layer.close(index);
		});
	  });	
	})
</script>
</body>
</html>

多重嵌套confirm验证弹框

layui.msg后面的按钮其实没啥用,不管点击哪一个,如果后面还有function,就会在关闭弹框后执行

layer.msg('也可以这样奇葩', {
                        btn: ['明白了', '知道了']
                    }, function () {
                        layer.msg('真的明白了', { icon: 1 });
                    }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://www.layuicdn.com/auto/layui.js"></script>
    <title>你好世界(runoob.com)</title>
</head>

<body>
    <p>你好世界!</p>

弹框的时候可以根据icon的下标来更换提示的图片
layui常用的弹出层的使用,以及jquery的ajax请求_第1张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第2张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第3张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第4张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第5张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第6张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第7张图片

layui常用的弹出层的使用,以及jquery的ajax请求_第8张图片

layui-prompt之弹出单行输入框或者多行文本域,点击确定后读取里面的内容

在调整fromType的时候要注意先后顺序,要放在第一行

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://www.layuicdn.com/auto/layui.js"></script>
    <title>你好世界(runoob.com)</title>
</head>

<body>
    <p>你好世界!</p>

    <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">

        <button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>

    </div>

    <script>
        layui.use(['layer'], function () {
            var $ = layui.jquery
                , layer = layui.layer;

            //询问框
            $('#layerDemo .layui-btn').on('click', function () {
                //例子2
                layer.prompt({
                    formType: 2,
                    value: '初始值',
                    title: '请输入值',
                    area: ['800px', '350px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    alert(value); //得到value
                    layer.close(index);
                });


            });
        })
    </script>
</body>

</html>

官网的对参数的解释

//prompt层新定制的成员如下
{
  formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
  value: '', //初始时的值,默认空字符
  maxlength: 140, //可输入文本的最大长度,默认500
}
 
//例子1
layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});
 
//例子2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

layui使用ajax提交数据

前端请求传Json对象则后端使用@RequestParam;
前端请求传Json对象的字符串则后端使用@RequestBody。

@RequestBody接受的是一个json对象的字符串,而不是Json对象,在请求时往往都是Json对象,用JSON.stringify(data)的方式就能将对象变成json字符串。

layui.use(['layer'],function () {
                var layer = layui.layer, $ = layui.jquery;

                $("#categorySubmit").on('click',function () {
                        layer.confirm("确定新增吗",function (index) {
                                var categoryName = $("input[name='categoryName']").val()
                                ,categoryType = $("input[name='categoryType']").val();
                                var data = {};
                                data.categoryName = categoryName;
                                data.categoryType = categoryType;
                                $.ajax({
                                        type:"POST",
                                        dataType:"json",
                                        contentType:"application/json",
                                        url: "/seller/category/add",
                                        data: JSON.stringify(data),
                                        success: function (res) {
                                                if(res.code == 0){
                                                        location.href = "/seller/category/list";
                                                }else {
                                                        layer.msg(res.msg);
                                                }
                                        },
                                        error: function (error) {
                                                layer.msg(error.msg);
                                        }
                                });

                                layer.close(index);
                        });
                });
        });

layui的open操作监听手动点击确定和点击右上角的关闭X

layer.open({
                    content: '测试回调',
                    yes: function (layero, index) {
                        layer.msg("手动确定");
                        console.log(layero, index);
                    },
                    cancel: function (index, layero) {
                        if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时,该层才会关闭
                            layer.close(index)
                        }
                        return false;
                    }
                });

success - 层弹出后的成功回调方法

success和yes,cancel不能在一起使用,success的优先级比较高.当层弹出后会直接执行success,后面的yes和cancel不会生效.并且当success和end在一起的时候只会生效success

layer.open({
                    content: '测试回调',
                    success: function (layero, index) {
                        layer.msg("弹出层成功弹出");
                        console.log(layero, index);
                    }
                });

end - 层销毁后触发的回调

layer.open({
                    content: '测试回调',
                    end: function (layero, index) {
                        layer.msg("弹出层成功销毁");
                        console.log(layero, index);
                    }
                });

layer.alert(content, options, yes) - 普通信息框

layui常用的弹出层的使用,以及jquery的ajax请求_第9张图片

    <script>
        layui.use(['layer'], function () {
            var $ = layui.jquery
                , layer = layui.layer;

            //询问框
            $('#layerDemo .layui-btn').on('click', function () {
                layer.alert('有了回调', function (index) {
                    //do something
                    layer.msg("确定后的回调");
                    layer.close(index);
                });



            });
        })
    </script>

layer.confirm(content, options, yes, cancel) - 询问框,实际使用范围广

<script>
        layui.use(['layer'], function () {
            var $ = layui.jquery
                , layer = layui.layer;

            //询问框
            $('#layerDemo .layui-btn').on('click', function () {
                layer.confirm('is not?', { icon: 3, title: '提示' }, 	                  
                function (index) {
                    //do something
                    layer.msg("确定后的回调");
                    layer.close(index);
                },
                 function (index) {
                        //do something
                        layer.msg("取消后的回调");
                        layer.close(index);
                    },
                );



            });
        })
    </script>

layer.msg(content, options, end) - 提示框

layer.msg('关闭后想做些什么', function(){
  //do something
});

在这里插入图片描述

layer.msg('有表情地提示', {icon: 6}); 
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //do something
});

layer.load(icon, options) - 加载层,并设置最大加载时间

除了有设置最大加载时间,其余的都要记得设置关闭,不然页面就一直卡在加载了

//关闭
layer.close(index);  

下面是各种demo

加载中的一个图标
在这里插入图片描述

var index = layer.load();//其实就是 layer.load(0);

在这里插入图片描述

var index = layer.load(1); //换了种风格

在这里插入图片描述
var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒

layer.tips(content, follow, options) - tips层,默认是在元素右边弹出

在这里插入图片描述

<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery
            , layer = layui.layer;

            $('#layerDemo .layui-btn').on('click', function () {
                layer.tips('只想提示地精准些', '#layerDemo .layui-btn');
            });
            
    })
</script>
layer.tips('在上面', '#id', {
  tips: 1
});

layui常用的弹出层的使用,以及jquery的ajax请求_第10张图片

layer.close(index) - 关闭特定层,关闭各种弹出层

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的,每一种弹层调用方式,都会返回一个index
layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
 
//如果你想关闭最新弹出的层,直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
 
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   

layer.closeAll(type) - 关闭所有层

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层 

layer.style(index, cssStyle) - 重新定义层的样式

该方法对loading层和tips层无效。参数index为层的索引,cssStyle允许你传入任意的css属性

index索引可以类似这样获取
var index = layer.open();
demo在上面的layer.close中

//重新给指定层设定width、top等
layer.style(index, {
  width: '1000px',
  top: '10px'
}); 

layer.photos(options) - 相册层

相册层,也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  });
}); 
//而返回的json需严格按照如下格式:
{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号,默认0
  "data": [   //相册包含的图片,数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

如果是直接从页面中获取图片,那么需要指向图片的父容器,并且你的img可以设定一些规定的属性(但不是必须的)。

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
 
<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
}); 
</script>

layer.ready(callback) - 初始化就绪,页面打开时要做的事情,比如请求,弹出层等

由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如

//页面一打开就执行弹层
layer.ready(function(){
  layer.msg('很高兴一开场就见到你');
});      

遮罩层,就弹出的时候置顶,然后点击按钮执行自己的自定义function,可见下面我实际操作的demo

先上layui官网的demo
https://www.layui.com/demo/layer.html

layui常用的弹出层的使用,以及jquery的ajax请求_第11张图片
官网demo

layui常用的弹出层的使用,以及jquery的ajax请求_第12张图片

点击事件,其中success回调中
var btn = layero.find(’.layui-layer-btn’);
获得的应该是当前的两个按钮
btn: [‘火速围观’, ‘残忍拒绝’]
数组
btn.find(’.layui-layer-btn0’).attr({
href: ‘http://www.layui.com/’
,target: ‘_blank’
});
给第一个按钮设置超链接属性,也可以设置点击事件做自己想做的事情

notice: function(){
      //示范一个公告层
      layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '300px;'
        ,shade: 0.8
        ,id: 'LAY_layuipro' //设定一个id,防止重复弹出
        ,btn: ['火速围观', '残忍拒绝']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式,0或者1
        ,content: '
你知道吗?亲!
layer ≠ layui

layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui

layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。

我们此后的征途是星辰大海 ^_^
'
,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/' ,target: '_blank' }); } }); }

我实际使用的demo

我这实际使用的时候只需要一个确定按钮,所以就只有一个,

layui常用的弹出层的使用,以及jquery的ajax请求_第13张图片

我把var btn = layero.find(’.layui-layer-btn’);和btn.find(’.layui-layer-btn0’)打印输出了一下控制台,可以看到,这两者都是数组,我在第二个btn.find(’.layui-layer-btn0’)[0]中找到的就是自己的按钮的dom对象,我这里加了个onclick事件,do something
layui常用的弹出层的使用,以及jquery的ajax请求_第14张图片

你可能感兴趣的:(前端)