zoukankan      html  css  js  c++  java
  • 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, '提示');
        }
    });
  • 相关阅读:
    python基础(5)
    python基础(4)
    python基础(3)
    python基础(2)
    第一个python程序(2)
    第一个python教程(1)
    【jQuery】
    【JavaScript】
    【练习】HTML+CSS
    【练习】Html
  • 原文地址:https://www.cnblogs.com/Lulus/p/7873840.html
Copyright © 2011-2022 走看看