欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Layui ------ 前端框架神器

程序员文章站 2022-04-07 17:55:09
...

Layui,在学校也就简单的用了几下,工作时需要用到,庆幸自己在学校多接触了前端知识,不过,自己是后端,前端还是小白,
废话不多说
layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。
地址:https://www.layui.com/
我说说我在用Layui遇到的一些小问题,可能会帮助刚接触的小白,同时也算是自己的工作日志

1,当layer.open一个form窗体时,你会发现一些select标签和复选框会不显示
这是因为Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。
解决办法,如下

 function add() {
        var form = layui.form;//只有执行了这一步,部分表单元素才会自动修饰成功
  
        layer.open({
            type: 1,
            title: "弹框",
            closeBtn: false,
            shift: 2,
            area: ['700px', '600px'],
            shadeClose: true,
            // btn: ['新增', '取消'],
            // btnAlign: 'c',
            content: $("#sd")

        });
        form.render(); //但是,如果你的HTML是动态生成的,自动渲染就会失效
  //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
    }

2,当弹出一个Tab页面时,发现Tab无法切换,代码如下

    function add() {
        var form = layui.form;
        layer.open({
            type: 1,
            title: "弹框",
            closeBtn: false,
            shift: 2,
            area: ['700px', '600px'],
            shadeClose: true,
            // btn: ['新增', '取消'],
            // btnAlign: 'c',
            content: $("#sd").html()//应该吧html()去掉即可

        });
        form.render();
    }

总之感觉Layui用着很爽,

相关标签: Layui好奇妙