• layerui


    引用layer.js,官网:http://layer.layui.com/
    常用属性:btn/icon/skin/time/content/yes(点击确认、提交)

    常用窗体
    .alert

    layer.alert("内容");
    layer.alert('墨绿风格,点击确认看深蓝', {
              skin: 'layui-layer-molv'//样式类名
              , closeBtn: 0
              }, function () {
    layer.alert('偶吧深蓝style', {
              skin: 'layui-layer-lan'
              , closeBtn: 0
              , shift: 2 //动画类型
              });
    });
    

    .confirm

    layer.confirm('您是如何看待前端开发?',{
    btn: ['重要', '奇葩'] //按钮
    }, function () {
    layer.msg('的确很重要', { icon: 1 });
    }, function () {
    layer.msg('也可以这样', {
    time: 20000, //20s后自动关闭
    btn: ['明白了', '知道了']
    },function() {
    layer.msg('明白就好', { time: 20000 });
    },function() {
               layer.msg('知道就好', { time: 20000 });
           });
    });
    

    .msg

    layer.msg('hello.');
    

    .open 自定义窗口

    layer.open({
    type: 1,
    skin: 'layui-layer-demo',//样式类名
    btn: ["关闭"],
    /*closeBtn: 0, //不显示关闭按钮*/
    shift: 2,
    shadeClose: true, //开启遮罩关闭
    content: '内容'
    });
    layer.open({
        type: 2,
        title: 'layer mobile页',
        shadeClose: true,
        shade: 0.8,
        area: ['700px','90%'],
        content: 'http://layer.layui.com/mobile/'//iframe的url
    });
    

    .html

    $("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');
    

    .load 加载

    $("#layerOpen").load("/Order/ProductList");
    

    .tips
    关闭layer
    用一个变量存储弹窗,在需要关闭的地方调用close方法

    <div style="display:none;"id="layerOpen"></div>
    var layerOpen = null; //弹窗变量
    layerOpen=layer.open({
                type: 1,
                title: "查看XXX的详情",
                area: ["1000px","600px"],
                content: $("#layerOpen"),
                cancel: function () {
                    $("#layerOpen").html("");
                }
            });
    layer.close(layerOpen);
    

    打开自定义页面

    $("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');
    $("#layerOpen").load("/Controller/Action");
    layerOpen = layer.open({
                type: 1,
                title: "选择XXX",
                area: ["1000px","600px"],
                content: $("#layerOpen"),
                cancel: function () {
                    $("#layerOpen").html("");
                }
            });
    

    加载页面
    保存变量,打开页面赋值,关闭页面

    //加载layer
    var load = null;
    $.ajax({
        type: "POST",
        url: "/Controller/Action",
        data: {
            "PKID":PKID,
            "Path": path
        },
        beforeSend: function () {
            load = layer.load(0, { shade:[0.3, '#000'] });//0代表加载的风格,支持0-2
        },
        success: function (result) {
            if (load != null) {
                layer.close(load);
            }
            layer.alert(result.Msg, '提示');
        }
    });
  • 相关阅读:
    MySQL 8 新特性之持久化全局变量的修改
    MySQL 8 新特性之Invisible Indexes
    pt-align
    Go碎碎念
    flask开发过程中的常见问题
    MySQL高可用方案MHA自动Failover与手动Failover的实践及原理
    MySQL高可用方案MHA在线切换的步骤及原理
    深度解析MySQL启动时报“The server quit without updating PID file”错误的原因
    MongoDB副本集的常用操作及原理
    MongoDB副本集的搭建
  • 原文地址:https://www.cnblogs.com/Lulus/p/7873840.html
Copyright © 2020-2023  润新知