目录 start

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

目录 end|2019-10-19 17:04|


LayUI

使用

模块化

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

引入核心文件:

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

使用layer模块:

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

非模块化

组件

Layer

layer组件 十分强大
layer 移动版

弹出页面层

  • 如何将script 标签内容直接引入
    1
    2
    3
    4
    5
    6
    layer.open({
    type: 1,
    area: ['600px', '360px'],
    shadeClose: true, //点击遮罩关闭
    content: 'test'
    });
1
2
3
<script type="text/html" id="test">
<input type="text" />
</script>

弹出页面中异步提交表单

1
2
3
4
5
6
7
8
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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)