LayUI

---

title: LayUI date: 2018-11-21 10:56:52 tags: - LayUI categories: - 前端框架

目录 start

1. LayUI
   1. 使用
      1. 模块化
      2. 非模块化
   2. 组件
      1. Layer
      2. 树形

目录 end|2020-06-04 19:41|

---

LayUI

使用

模块化

写法稍微复杂了些,但是提高了页面加载速度

引入核心文件:

    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../layui/layui.js"></script>

使用layer模块:

    layui.use(['layer'], function(){
        var layer = layui.layer;
        layer.msg('Hello World');
    });

非模块化

组件

Layer

layer组件 十分强大 layer 移动版

弹出页面层

• 如何将script 标签内容直接引入

    layer.open({
      type: 1,
      area: ['600px', '360px'],
      shadeClose: true, //点击遮罩关闭
      content: 'test'
    });

    <script type="text/html" id="test">
    <input type="text" />
    </script>

弹出页面中异步提交表单

    <script type="text/html" id="set_key">
        <form id="set-form" class="set-form">
            <input type="text" id="key" required/> <->
            <input type="text" id="value" required/><br><br>
            <button>新增 string</button>
        </form>
    </script>
    <button onclick="string()">String</button>

    function string(){
        var set_content = $("#set_key").html()
        layer.tab({
            area: ['500px', '520px'],
            tab: [{
                title: 'set', 
                content: set_content
            }]
        });        
        $("#set-form").submit(function(e){
            e.preventDefault();
            set();
        });
    }
    function set(){
        var key = $("#key").val()
        var value = $("#value").val()
        handlePost('/key',  {
            key: key, 
            value: value
        }, function(data){
            console.log(data)
        }, function(data){
            console.log(data)
        })
    }
}

树形

基于layui树形菜单写的树形列表（treetable）