theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
贤心
2021-03-31 14:07:23 +08:00
parent 743d498816
commit 716bccb3e8
221 changed files with 2402 additions and 1129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/admin.html
View File

@@ -70,7 +70,9 @@
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
<div style="padding: 15px;">
<p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p><p>内容主体区域</p>
</div>
</div>
<div class="layui-footer">

39
examples/all.html
View File

@@ -14,7 +14,8 @@ body{padding: 10px;}
<body>
<div id="demo1"></div>
<button class="layui-btn demo" data-type="test">测试弹出式Form</button>
<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
<div class="layui-tab" lay-filter="tabDemo">
<ul class="layui-tab-title">
@@ -38,7 +39,7 @@ body{padding: 10px;}
</div>
<script src="../dist/layui.all.js"></script>
<script src="../dist/layui.js"></script>
<script>
;!function(){
var $ = layui.jquery
@@ -46,7 +47,8 @@ body{padding: 10px;}
,form = layui.form
,laypage = layui.laypage
,element = layui.element
,transfer = layui.transfer;
,transfer = layui.transfer
,util = layui.util;
layer.ready(function(){
layer.msg('hello');
@@ -84,21 +86,27 @@ body{padding: 10px;}
]
//,width: 150 //定义宽度
,height: 210 //定义高度
})
});
//触发事件
var active = {
test: function(){
util.event('test-active', {
'test-form': function(){
layer.open({
type: 1
,resize: false
,content: ['<ul class="layui-form" style="margin: 10px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">邮箱激活</label>'
,'<label class="layui-form-label">输入框</label>'
,'<div class="layui-input-block">'
,'<select name="activate">'
,'<option value="0">未激活</option>'
,'<option value="1">已激活</option>'
,'<input class="layui-input" name="field1">'
,'</div>'
,'</li>'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">选择框</label>'
,'<div class="layui-input-block">'
,'<select name="field2">'
,'<option value="A">A</option>'
,'<option value="B">B</option>'
,'<select>'
,'</div>'
,'</li>'
@@ -115,10 +123,13 @@ body{padding: 10px;}
}
});
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
,'test-use': function(othis){
layui.use(['laytpl','laypage','laydate','jquery','layer','util','element','upload','slider','colorpicker','form','tree','transfer','table','carousel','rate','flow','layedit','code'], function(){
layer.tips('请观察 Network 是否有重复加载 js 文件。如果没有任何新的请求，则代表正常。', othis, {
time: 10*1000
});
});
}
});
}();
</script>

158
examples/button.html
View File

@@ -18,88 +18,112 @@ body{padding: 10px;}
</head>
<body>
<div class="layui-container">
<span>按钮色系：</span>
<hr>
<div class="layui-btn-container">
<a href="" class="layui-btn layui-btn-primary">原始按钮</a>
<a href="" class="layui-btn">默认按钮</a>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<div class="layui-btn-container">
<a href="" class="layui-btn layui-btn-primary layui-border">原始按钮</a>
<a href="" class="layui-btn layui-btn-primary layui-border-green">主色按钮</a>
<button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
<button class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>
</div>
<span>按钮色系：</span>
<br><br>
<a href="" class="layui-btn layui-btn-primary">原始按钮</a>
<a href="" class="layui-btn">默认按钮</a>
<button class="layui-btn layui-btn-normal">百搭按钮</button>
<button class="layui-btn layui-btn-warm">暖色按钮</button>
<button class="layui-btn layui-btn-danger">警告按钮</button>
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
<span>按钮图标：</span>
<hr>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe641;</i></button>
</div>
<br><br>
<br><br>
<span>按钮图标：</span>
<span>按钮尺寸：</span>
<hr>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-lg">大型按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-xs">迷你按钮</button>
</div>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button class="layui-btn layui-btn-primary">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
</div>
<br><br>
<button class="layui-btn"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe641;</i></button>
<span>按钮圆角：</span>
<hr>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
<br><br>
<br><br>
<span>按钮图文：</span>
<hr>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius">大型加圆角</button>
<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-delete"></i> 删除</button>
<button class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon layui-icon-share"></i> 禁分享</button>
</div>
<span>按钮尺寸：</span>
<br><br>
<span>按钮组：</span>
<hr>
<button class="layui-btn layui-btn-big">大型按钮</button>
<button class="layui-btn">默认按钮</button>
<button class="layui-btn layui-btn-small">小型按钮</button>
<button class="layui-btn layui-btn-mini">迷你按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-big">大型按钮</button>
<button class="layui-btn layui-btn-primary">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-small">小型按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-mini">迷你按钮</button>
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn ">编辑</button>
<button class="layui-btn">删除</button>
</div>
<br><br>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
</div>
<span>按钮圆角：</span>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
</div>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
<br><br>
<span>按钮图文：</span>
<button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius">大型加圆角</button>
<button class="layui-btn layui-btn-small layui-btn-normal"><i class="layui-icon">&#xe640;</i> 删除</button>
<button class="layui-btn layui-btn-mini layui-btn-disabled"><i class="layui-icon">&#xe641;</i> 禁分享</button>
<br><br>
<span>按钮组：</span>
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn ">编辑</button>
<button class="layui-btn">删除</button>
<br><br><br>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe602;</i></button>
</div>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe654;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe602;</i></button>
</div>
<br><br><br>
<script src="../src/layui.js"></script>
<script>

244
examples/dropdown.html Normal file
View File

@@ -0,0 +1,244 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>下拉菜单 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-btn-container" style="padding: 30px 0;">
<button class="layui-btn" id="demo1">
按钮下拉
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary" id="demo2">
按钮下拉
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
<div class="layui-text">
<a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
</div>
<div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
<span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('dropdown', function(){
var dropdown = layui.dropdown;
dropdown.render({
elem: '#demo1'
,data: [{
title: 'menu item 1'
,templet: '<i class="layui-icon layui-icon-light"></i> {{d.title}} <span class="layui-badge-dot"></span>'
,id: ''
,href: ''
,type: '' //菜单类型，支持：normal/group/parent
},{
title: 'menu item 2'
,templet: '<img src="//cdn.layui.com/avatar/168.jpg?t=123" style="width: 16px;"> {{d.title}}'
,id: ''
,href: 'https://www.layui.com/'
,target: '_blank'
},{type: '-'},{},{
title: 'menu item 3'
,id: ''
,type: 'group'
,child: [{
title: 'menu item 3-1'
,id: ''
},{
title: 'menu item 3-2'
,id: ''
,child: [{
title: 'menu item 3-2-1'
,id: ''
},{
title: 'menu item 3-2-2'
,id: ''
,type: 'group'
,child: [{
title: 'menu item 3-2-2-1'
,id: ''
},{
title: 'menu item 3-2-2-2'
,id: ''
}]
},{
title: 'menu item 3-2-3'
,id: ''
}]
},{
title: 'menu item 3-3'
,id: ''
,type: 'group'
,child: [{
title: 'menu item 3-3-1'
,id: ''
},{
title: 'menu item 3-3-2'
,id: ''
,child: [{
title: 'menu item 3-3-2-1'
,id: ''
},{
title: 'menu item 3-3-2-2'
,id: ''
},{
title: 'menu item 3-3-2-3'
,id: ''
}]
},{
title: 'menu item 3-3-3'
,id: ''
}]
}]
}
,{type: '-'}
,{
title: 'menu item 4'
,id: ''
},{
title: 'menu item 5'
,id: ''
,child: [{
title: 'menu item 5-1'
,id: ''
,child: [{
title: 'menu item 5-1-1'
,id: ''
},{
title: 'menu item 5-1-2'
,id: ''
},{
title: 'menu item 5-1-3'
,id: ''
}]
},{
title: 'menu item 5-2'
,id: ''
},{
title: 'menu item 5-3'
,id: ''
}]
},{type:'-'},{
title: 'menu item 6'
,id: ''
,type: 'group'
,isSpreadItem: false
,child: [{
title: 'menu item 6-1'
,id: ''
},{
title: 'menu item 6-2'
,id: ''
},{
title: 'menu item 6-3'
,id: ''
}]
}]
,id: 'demo1'
//菜单被点击的事件
,click: function(obj){
console.log(obj);
}
});
var inst = dropdown.render({
elem: '#demo2'
//,show: true
,data: [{
title: 'menu item 1'
,href: '#1'
},{
title: 'menu item 2'
,href: '#2'
},{
title: 'menu item 3'
,href: '#3'
}]
,click: function(){
}
});
dropdown.render({
elem: '#demo3'
,content: '自定义内容 123 '
,style: 'background:#666;color:#fff;padding:15px;'
,trigger: 'hover'
});
//右键
dropdown.render({
elem: document//'#demo20' //也可绑定到 document，从而重置整个右键
,trigger: 'contextmenu' //contextmenu
,isAllowSpread: false
//,style: 'width: 200px'
,data: [{
title: 'menu item 1'
,id: '#1'
},{
title: 'menu item 2'
,id: 'reload'
},{type:'-'},{
title: 'menu item 3'
,id: '#3'
,child: [{
title: 'menu item 3-1'
,id: '#1'
},{
title: 'menu item 3-2'
,id: '#2'
},{
title: 'menu item 3-3'
,id: '#3'
}]
},{type:'-'},{
title: 'menu item 4'
,id: ''
},{
title: 'menu item 5'
,id: '#1'
},{
title: 'menu item 6'
,id: '#1'
}]
,click: function(obj, othis){
if(obj.id === 'reload'){
location.reload();
}
}
});
return;
dropdown.render({
elem: document
,content: '123'
});
});
</script>
</body>
</html>

1
examples/form.html
View File

@@ -146,6 +146,7 @@ body{padding: 10px;}
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关">
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
</div>
</div>
<div class="layui-form-item" pane>

16
examples/json/table/demo1.json
View File

@@ -13,7 +13,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
,"experience": "7"
,"experience": 7
,"ip": "192.168.0.8"
,"logins": null
,"joinTime": "2016-10-14"
@@ -24,7 +24,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
,"experience": "9"
,"experience": 9
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
@@ -36,7 +36,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "8"
,"experience": 8
,"ip": "192.168.0.8"
,"logins": null
,"joinTime": "2016-10-14"
@@ -47,7 +47,7 @@
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "6"
,"experience": 6
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
@@ -58,7 +58,7 @@
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "64"
,"experience": 64
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
@@ -69,7 +69,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "65"
,"experience": 65
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
@@ -80,7 +80,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "49"
,"experience": 49
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
@@ -91,7 +91,7 @@
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "5"
,"experience": 5
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"

31
examples/laydate.html
View File

@@ -108,19 +108,19 @@ body{padding: 50px 100px;}
<div class="layui-inline" id="test10"></div>
<div class="layui-inline" id="test11" style="margin-left: 30px;"></div>
<script src="../src/layui.js" charset="utf-8"></script>
<script src="../src/layui.js" src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
layui.use('laydate', function(laydate){
//双控件
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
,trigger: 'click'
,lang: 'en'
//,lang: 'en'
,range: true //开启日期范围，默认使用“_”分割
,value: '2021-03-27 00:00:00 - 2021-02-27 00:00:00'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -133,10 +133,9 @@ layui.use('laydate', function(){
laydate.render({
elem: '#test2'
//,format: 'yyyy年MM月dd日'
//,value: new Date(1989,9,14)
,value: new Date(1534766888000)
,isInitValue: false
,format: 'yyyyMMdd'
,value: '20170910'
,format: 'yyyy/MM/dd'
//,max: 0
//,min: '2016-10-14'
@@ -169,8 +168,8 @@ layui.use('laydate', function(){
elem: '#test4'
,type: 'month'
,range: true
//,trigger: 'click'
,max: -30
,trigger: 'click'
//,max: -30
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -241,6 +240,7 @@ layui.use('laydate', function(){
,theme: 'molv'
,value: 20180115
,isInitValue: true
,lang: 'en'
//,range: true
,trigger: 'click'
});
@@ -294,16 +294,16 @@ layui.use('laydate', function(){
,position: 'static'
,calendar: true //是否开启公历重要节日
,mark: { //标记重要日子
'2017-8-20': ''
,'2017-8-21': ''
'2021-8-20': ''
,'2021-8-21': ''
}
,done: function(value, date, endDate){
if(date.year == 2017 && date.month == 8 && date.date == 20){
ins10.hint('XX活动日');
if(date.year == 2021 && date.month == 8 && date.date == 20){
ins10.hint(value + '，活动日');
}
}
,change: function(value, date, endDate){
console.log(value)
console.log(value,date)
}
});
@@ -320,6 +320,7 @@ layui.use('laydate', function(){
console.log(value)
}
});
});
</script>
</body>

29
examples/layer.html
View File

@@ -5,7 +5,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layer弹层 - layui</title>
<title>layer 弹层 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
@@ -15,15 +15,17 @@ body{padding: 100px;}
</head>
<body>
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
<button class="layui-btn demo" data-type="test2">Confirm</button>
<button class="layui-btn demo" data-type="test3">Msg</button>
<button class="layui-btn demo" data-type="test4">Tips</button>
<button class="layui-btn demo" data-type="test5">Page</button>
<button class="layui-btn demo" data-type="test6">Iframe</button>
<button class="layui-btn demo" data-type="test7">Prompt</button>
<button class="layui-btn demo" data-type="test8">Tab</button>
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
<button class="layui-btn demo" data-type="test2">Confirm</button>
<button class="layui-btn demo" data-type="test3">Msg</button>
<button class="layui-btn demo" data-type="test4">Tips</button>
<button class="layui-btn demo" data-type="test5">Page</button>
<button class="layui-btn demo" data-type="test6">Iframe</button>
<button class="layui-btn demo" data-type="test7">Prompt</button>
<button class="layui-btn demo" data-type="test8">Tab</button>
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
</div>
<div id="test11111" style="display: none;padding: 20px;">
123
@@ -35,6 +37,9 @@ body{padding: 100px;}
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
layer.msg('hello');
//触发事件
var active = {
test: function(){
@@ -63,14 +68,14 @@ layui.use('layer', function(){
title:'更新论坛信息',
type: 1,
skin: 'layui-layer-rim',
area: ['500px', '580px'],
area: ['1000px', '580px'],
content: $('#test11111')
});
}
,test6: function(){
layer.open({
type: 2
,content: 'http://fly.layui.com/'
,content: 'https://www.aliyun.com/activity?userCode=ap0255is'
,area: ['375px', '500px']
,maxmin: true
});

199
examples/menu.html Normal file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>菜单元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding-top: 30px;">
<div class="layui-btn-container">
<button type="button" class="layui-btn" lay-active="lg">大尺寸</button>
<button type="button" class="layui-btn" lay-active="normal">常规尺寸</button>
</div>
<div class="layui-row layui-col-space30" id="demo-box" style="padding: 30px 0;">
<div class="layui-col-xs9 layui-col-md3">
<div class="layui-panel">
<ul class="layui-menu" id="demo1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1</a></div>
</li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="">menu item 2 <span class="layui-badge-dot"></span></a>
</div>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">
menu group <i class="layui-icon layui-icon-up"></i>
</div>
<ul>
<li lay-options="{id: 103}">
<div class="layui-menu-body-title">menu item 3-1</div>
</li>
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
<div class="layui-menu-body-title">menu group 2</div>
<ul>
<li class="layui-menu-item-checked">
<div class="layui-menu-body-title">menu item 3-2-1</div>
</li>
<li><div class="layui-menu-body-title">menu item 3-2-2</div></li>
</ul>
</li>
<li><div class="layui-menu-body-title">menu item 3-3</div></li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li><div class="layui-menu-body-title">menu item 4 <span class="layui-badge">1</span></div></li>
<li><div class="layui-menu-body-title">menu item 5</div></li>
<li><div class="layui-menu-body-title">menu item 6</div></li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 7 Children
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 7-1
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li><div class="layui-menu-body-title">menu item 7-2-1</div></li>
<li><div class="layui-menu-body-title">menu item 7-2-2</div></li>
<li><div class="layui-menu-body-title">menu item 7-2-3</div></li>
<li><div class="layui-menu-body-title">menu item 7-2-4</div></li>
</ul>
</div>
</li>
<li><div class="layui-menu-body-title">menu item 7-2</div></li>
<li><div class="layui-menu-body-title">menu item 7-3</div></li>
</ul>
</div>
</li>
<li>menu item 8</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group" lay-options="{type: 'group'}">
<div class="layui-menu-body-title">menu group 9</div>
<ul>
<li><div class="layui-menu-body-title">menu item 9-1</div></li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 9-2
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li><div class="layui-menu-body-title">menu item 9-2-1</div></li>
<li><div class="layui-menu-body-title">menu item 9-2-2</div></li>
<li><div class="layui-menu-body-title">menu item 9-2-3</div></li>
</ul>
</div>
</li>
<li><div class="layui-menu-body-title">menu item 9-31</div></li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li><div class="layui-menu-body-title">menu item 10</div></li>
</ul>
</div>
</div>
<div class="layui-col-xs9 layui-col-md3">
<div class="layui-panel">
<ul class="layui-menu" id="docDemoMenu1">
<li lay-options="{id: 100}">
<div class="layui-menu-body-title">menu item 1</div>
</li>
<li lay-options="{id: 101}">
<div class="layui-menu-body-title">
<a href="">menu item 2 <span class="layui-badge-dot"></span></a>
</div>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: false}">
<div class="layui-menu-body-title">
menu group
</div>
<ul>
<li lay-options="{id: 1031}"><div class="layui-menu-body-title">menu item 3-1</div></li>
<li lay-options="{id: 1032}">
<div class="layui-menu-body-title">menu item 3-2</div>
</li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group', isAllowSpread: false}">
<div class="layui-menu-body-title">menu group 2</div>
<ul>
<li lay-options="{id: 1031}"><div class="layui-menu-body-title">menu item 4-1</div></li>
<li lay-options="{id: 1032}">
<div class="layui-menu-body-title">menu item 4-2</div>
</li>
</ul>
</li>
<li class="layui-menu-item-divider"></li>
<li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
<div class="layui-menu-body-title">
menu item 5
<i class="layui-icon layui-icon-right"></i>
</div>
<div class="layui-panel layui-menu-body-panel">
<ul>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-1</div>
</li>
<li lay-options="{id: 1051}">
<div class="layui-menu-body-title">menu item 5-2</div>
</li>
</ul>
</div>
</li>
<li lay-options="{id: 106}">
<div class="layui-menu-body-title">menu item 6</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['dropdown', 'util'], function(){
var dropdown = layui.dropdown
,util = layui.util
,$ = layui.jquery;
dropdown.on('click(demo1)', function(options){
var thisElem = $(this);
console.log(thisElem, options);
});
util.event('lay-active', {
normal: function(){
$('#demo-box').children().addClass('layui-col-md3').removeClass('layui-col-md4');
$('#demo-box').find('.layui-menu').removeClass('layui-menu-lg');
}
,lg: function(){
$('#demo-box').children().addClass('layui-col-md4').removeClass('layui-col-md3')
$('#demo-box').find('.layui-menu').addClass('layui-menu-lg');
}
});
});
</script>
</body>
</html>

69
examples/table.html
View File

@@ -19,8 +19,10 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm" lay-event="reload">重载</button>
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载2</button>
</div>
</script>
@@ -177,7 +179,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</table>
</div>
<script src="../src/layui.js" src="//layui.hcwl520.com.cn/layui-v2.4.5/layui.js" charset="utf-8"></script>
<script src="../src/layui.js" src="//www.layuicdn.com/layui-v2.0.1/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
@@ -195,7 +197,7 @@ layui.use('table', function(){
}
,autoSort: false
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
,limit: 30
@@ -222,7 +224,7 @@ layui.use('table', function(){
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,initSort: {
,initSort1: {
field: 'experience' //排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
@@ -244,6 +246,23 @@ layui.use('table', function(){
*/
});
//排序事件
table.on('sort(test)', function(obj){
console.log(this)
return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
@@ -265,6 +284,11 @@ layui.use('table', function(){
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'getData':
var getData = table.getData(obj.config.id);
console.log(getData);
layer.alert(JSON.stringify(getData));
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
@@ -273,10 +297,28 @@ layui.use('table', function(){
break;
case 'reload':
table.reload('test', {
page: {curr: 5}
page: {curr: 5, limit: 10}
,where: {
a: 123
}
,cols: ins1.config.cols
//,height: 300
//,url: 'x'
}, 'data');
});
break;
case 'reload2':
table.reload('test', {
where: {
token: 'sasasas'
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
//,height: 500
});
break;
};
});
@@ -371,23 +413,6 @@ layui.use('table', function(){
}
});
//监听排序
table.on('sort(test)', function(obj){
console.log(this)
//return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
//return;
//直接赋值数据

31
examples/temp.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>组件示例模板 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
123
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('lay', function(){
});
</script>
</body>
</html>

1
examples/transfer.html
View File

@@ -65,6 +65,7 @@
,reload: function(){
transfer.reload('demoId', {
value: ["6"]
//,data: [{"value": "1", "title": "李白"}]
});
}
});