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

Merge branch 'master' of https://github.com/sentsin/layui into sentsin-master

Browse Source
This commit is contained in:
bourne7
2022-04-07 17:21:30 +08:00
parent 4d400a369d ce805ee6b3
commit 0fed81d962
263 changed files with 5167 additions and 7378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
examples/admin.html
View File

@@ -1,90 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>

181
examples/all.html
View File

@@ -1,61 +1,175 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>完整库使用 - layui</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>完整库使用 - layui</title>
<link rel="stylesheet" href="../build/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
<style>
body{padding: 10px;}
</style>
</head>
<body>
<textarea style="
position: fixed;
top: 0;
bottom: 0;
right:0;
width: 100px;
background-color:#666;
z-index:100;
resize: none;">
</textarea>
<div id="demo1"></div>
<button class="layui-btn demo" data-type="test">测试弹出式Form</button>
<div class="layui-btn-container">
<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
</div>
<div class="layui-inline">
<input class="layui-input" id="date1" placeholder="日期">
</div>
<div class="layui-tab" lay-filter="tabDemo">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-tab-item">
<div id="test2" class="demo-transfer"></div>
</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<script src="../dist/layui.all.js"></script>
<script src="../dist/layui.js"></script>
<script>
;!function(){
console.log(layui.$);
//(function(){
layui.use(function(){
var $ = layui.jquery
,layer = layui.layer
,form = layui.form
,laypage = layui.laypage;
,laypage = layui.laypage
,element = layui.element
,transfer = layui.transfer
,util = layui.util
,laydate = layui.laydate;
layer.ready(function(){
layer.msg('hello');
});
layer.msg('hello layui');
//layer.closeAll();
//自动测试
(function(run){
if(!run) return;
var timer = setInterval(function(){
location.reload();
}, 1000);
$.ajax({
url: './all.html'
,beforeSend: function(){
layer.load();
}
,success: function(){
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
console.error('layer close 异常');
clearInterval(timer);
}
}, 200);
});
}
});
})(0);
laypage.render({
elem: 'demo1'
,count: 100 //总页数
});
console.log(lay('#footer').html());
laydate.render({
elem: '#date1'
})
//测试加载非内置模块
/*
layui.config({
base: 'extends/'
}).extend({
mod1: 'mod1'
,mod2: 'mod2'
}).use('mod1');
*/
//定义标题及数据源
transfer.render({
elem: '#test2'
,title: ['候选文人', '获奖文人'] //自定义标题
,data: [
{"value": "1", "title": "李白"}
,{"value": "2", "title": "杜甫"}
,{"value": "3", "title": "苏轼"}
,{"value": "4", "title": "李清照"}
,{"value": "5", "title": "鲁迅", "disabled": true}
,{"value": "6", "title": "巴金"}
,{"value": "7", "title": "冰心"}
,{"value": "8", "title": "矛盾"}
,{"value": "9", "title": "贤心"}
]
//,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>'
@@ -72,12 +186,29 @@ 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>
<span class="layui-breadcrumb" lay-separator="-">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<div id="footer">© footer</div>
</body>
</html>

98
examples/base.html Normal file
View File

@@ -0,0 +1,98 @@
<!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;">
<blockquote class="layui-elem-quote" style="color: #666;">
调试结果查看浏览器控制台
</blockquote>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('lay', function(){
var lay = layui.lay;
//sort
console.log(
'layui.sort: 数字',
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
);
console.log(
'layui.sort: 中文',
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
);
console.log(
'layui.sort: 英文',
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
);
console.log(
'layui.sort: 混合'
,layui.sort([
{a: 3}
,{a: '男'}
,{a: 0}
,{a: 66}
,{a: 99}
,{a: 'C'}
,{a: '女'}
,{a: 0}
,{a: -1}
,{a: 'B'}
,{a: '男'}
,{a: 'A'}
,{a: -5}
,{a: '男'}
,{a: 6}
,{a: 9}
], 'a')
);
console.log(
'layui._typeof: ',
layui._typeof(new RegExp()),
layui._typeof(new Date()),
layui._typeof([])
);
console.log(
'layui._isArray ',
layui._isArray([1,6]),
layui._isArray(lay('div')),
layui._isArray(document.querySelectorAll('div')),
layui._isArray({key: 'value'})
);
console.log(
'lay.extend {}: ',
lay.extend(
{},
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
{a: 111, b: 1, c: {bbb: 'bbb'}},
{a: 222222, arr: [5]}
)
);
console.log(
'lay.extend []: ',
lay.extend([], [1,3,5])
);
});
</script>
</body>
</html>

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>
<div class="layui-btn">默认按钮</div>
<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>

1
examples/carousel.html
View File

@@ -20,6 +20,7 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="test1">
<div carousel-item>
<div>条目1</div>

246
examples/dropdown.html Normal file
View File

@@ -0,0 +1,246 @@
<!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'
//,align: 'right'
,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;'
,align: 'center'
,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>

276
examples/element.html
View File

@@ -131,8 +131,8 @@ body{padding:20px;}
<br><br>
<blockquote class="layui-elem-quote">Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架Layui正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote"> Layui 正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm"> Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架</blockquote>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>
@@ -165,270 +165,6 @@ body{padding:20px;}
灰色分割线
<hr class="layui-bg-gray">
<br><br>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd>
<a href="javascript:;">选项3</a>
</dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd>
<a href="javascript:;">选项3</a>
</dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd>
<dd>
<a href="javascript:;">组件二</a>
</dd>
<dd><a href="javascript:;">组件三</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="javascript:;">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
</div>
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
@@ -438,14 +174,6 @@ body{padding:20px;}
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
element.on('nav(test)', function(elem){
console.log(elem)
});
element.on('collapse(test)', function(data){
console.log(data);
});

208
examples/element.nav.html Normal file
View File

@@ -0,0 +1,208 @@
<!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">
<style>
body{padding:20px;}
</style>
</head>
<body>
<ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据<span class="layui-badge-dot"></span></a></li>
<li class="layui-nav-item">
<a href="javascript:;">方案</a>
<dl class="layui-nav-child layui-nav-child-c">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img"></a>
<dl class="layui-nav-child layui-nav-child-r">
<dd><a href="">Your organizations</a></dd>
<dd><a href="">Settings</a></dd>
<hr>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
</ul>
<br>
<ul class="layui-nav layui-bg-cyan">
<li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item">
<a href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd class="layui-this"><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd>
<dd>
<a href="javascript:;">组件二</a>
</dd>
<dd><a href="javascript:;">组件三</a></dd>
</dl>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="javascript:;">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br>
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
<br><br>
<span class="layui-breadcrumb" lay-separator="|">
<a href="">娱乐</a>
<a href="">八卦</a>
<a href="">体育</a>
<a href="">搞笑</a>
<a href="">视频</a>
<a href="">游戏</a>
<a href="">综艺</a>
</span>
<br><br><br><br><br><br>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('nav(test)', function(elem){
console.log(elem)
});
});
</script>
</body>
</html>

120
examples/element.tab.html Normal file
View File

@@ -0,0 +1,120 @@
<!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">
<style>
body{padding:20px;}
</style>
</head>
<body>
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
</div>
</div>
<button class="layui-btn" onclick="layui.element.tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element.tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element.tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
</div>
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>
</div>
<ul class="layui-tab-title">
<li class="layui-this"><a href="#1">标题题题题题题1</a></li>
<li><a href="#2">标题题题2</a></li>
<li><a href="#3">标题3</a></li>
<li><a href="#4">标题题题题题题题4</a></li>
<li><a href="#5">标题5</a></li>
<li><a href="#6">标题6</a></li>
<li><a href="#7">标题7</a></li>
<li><a href="#8">标题题题题题题题8</a></li>
</ul>
<div class="layui-tab" lay-filter="test" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li>标题6</li>
<li>标题7</li>
<li>标题8</li>
</ul>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['element', 'form'], function(){
var element = layui.element;
element.on('tab(test)', function(data){
console.log(this, data);
});
});
</script>
</body>
</html>

6
examples/extends/mod1.js
View File

@@ -1,5 +1,7 @@
layui.define(['mod2', 'layer'], function(exports){
/**
扩展模块，且依赖 mod2
**/
layui.define('mod2', function(exports){
var $ = layui.jquery;
console.log(layui.mod2, layui.layer, layui.form)

9
examples/extends/mod2.js
View File

@@ -1,7 +1,10 @@
/**
扩展模块，只依赖内置模块
**/
layui.define(function(exports){
console.log('mod2.js')
layui.define(['jquery', 'form'], function(exports){
console.log(layui.$)
exports('mod2', {
name: 'mod2'
})

51
examples/flow.html
View File

@@ -18,20 +18,24 @@ img{width: 500px; height: 300px;}
<body>
<ul class="flow-default"></ul>
<ul class="flow-default" id="test1"></ul>
<div class="layui-hide">
<ul class="flow-default" id="test2"></ul>
</div>
<div class="demo" style="height: 200px; overflow: auto;">
<img lay-src="http://s16.mogucdn.com/p2/160919/upload_493j665e50b0i0g8j61iie6f5aa5c_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160920/in_1icf55k51643icf2i1i06g897hjdj_715x531.jpg">
<img lay-src="http://s10.mogucdn.com/p2/160918/oj_4hge1j47hl5ie0fljd6d07ha3kj2l_715x530.jpg">
<img lay-src="http://s7.mogucdn.com/p2/160914/iz_2lcjk0lbl8la70448hj0jg0l8gde5_305x330.jpg">
<img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg">
<img lay-src="http://s8.mogucdn.com/p1/160721/iz_ifqtszjqgazdsmtfhezdambqgyyde_305x330.jpg">
<img lay-src="http://s18.mogucdn.com/p2/160919/upload_4dh1hfflhi031ll1akh49i5aeldjl_183x213.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_16e3b4d04ck34g1fb61d5llj47526_175x170.png">
<img lay-src="http://s8.mogucdn.com/p2/160907/1dq_132fe83d4gi1jb6gehc8ibcl6944e_175x170.png">
<div class="demo" style="height: 300px; overflow: auto;">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/error.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
<img src="https://sentsin.gitee.io/res/images/demo/loading.gif" lay-src="https://sentsin.gitee.io/res/images/demo/layer.png">
</div>
@@ -41,17 +45,34 @@ layui.use('flow', function(){
var flow = layui.flow;
flow.load({
elem: '.flow-default' //流加载容器
elem: '#test1' //流加载容器
//,scrollElem: '.flow-default' //滚动条所在元素，默认document
//,isAuto: false
//,end: '没了'
,isLazyimg: true
,done: function(page, next){ //加载下一页
console.log(page)
console.log('done:', page)
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="http://s6.mogucdn.com/p2/160914/iz_5lc1cdg3j2hibl9ai99lg7c28k1fh_305x330.jpg?v='+ (page+i) +'"></li>')
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);
}
});
flow.load({
elem: '#test2' //流加载容器
//,scrollElem: '.flow-default' //滚动条所在元素，默认document
//,isAuto: false
//,end: '没了'
,isLazyimg: true
,done: function(page, next){ //加载下一页
setTimeout(function(){
var lis = [];
for(var i = 0; i < 6; i++){
lis.push('<li><img lay-src="https://sentsin.gitee.io/res/images/demo/layer.png?v='+ (page+i) +'"></li>')
}
next(lis.join(''), page < 3);
}, 500);

81
examples/form.html
View File

@@ -12,12 +12,32 @@
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
<style>
body{padding: 10px;}
</style>
</head>
<body>
<form class="layui-form" method="get">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="arr[title]" required placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="top">立即提交</button>
</div>
</form>
<hr>
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
@@ -64,11 +84,13 @@ body{padding: 10px;}
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-block">
<select name="quiz" lay-verify="required" lay-verType="tips">
<select name="quiz" lay-verify="required" lay-verType="tips" lay-filter="quiz111">
<option value="">请选择问题</option>
<option value="0">你工作的第一个城市</option>
<option value="0">你工作的 第一个城市</option>
<option value="1" disabled>你的工号</option>
<option value="2">你最喜欢的老师</option>
<option value="2">
你最喜欢的老师
</option>
</select>
</div>
</div>
@@ -146,6 +168,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>
@@ -213,6 +236,14 @@ layui.use(['form', 'layedit', 'laydate'], function(){
]
});
form.on('submit(top)', function(data){
console.log(data);
return false;
});
//日期
laydate.render({
elem: '#date'
@@ -220,9 +251,10 @@ layui.use(['form', 'layedit', 'laydate'], function(){
//初始赋值
var thisValue = form.val('first', {
'title': '测试'
'title': '测试测试测试'
,'phone': 11111111111
,'email': 'xu@sentsin.com'
,'date': '2021-05-30'
,'password': 123123
//,'quiz': 2
,'interest': 3
@@ -232,11 +264,10 @@ layui.use(['form', 'layedit', 'laydate'], function(){
,'desc': 'form 是我们非常看重的一块'
,xxxxxxxxx: 123
});
console.log(thisValue);
//事件监听
form.on('select', function(data){
form.on('select(quiz111)', function(data){
console.log('select: ', this, data);
});
@@ -273,41 +304,24 @@ layui.use(['form', 'layedit', 'laydate'], function(){
</script>
<form id="test">
<form id="test1" action="" target="_blank">
<input type="radio" value="girl" disabled>
<input type="checkbox" name="love[a]">
<input type="checkbox" name="love[b]">
<input value="1">
<input name="as">
<input name="=" value="2">
<select name="quiz">
<option value="">请选择问题</option>
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号" selected>你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
</select>
<button>Go</button>
<button type="submit">原始表单，测试提交</button>
</form>
<script>
layui.use('jquery', function(){
var $ = layui.jquery;
@@ -317,8 +331,9 @@ layui.use('jquery', function(){
$('#test').on('submit', function(){
return false
});
$('#test').on('submit', function(){
return true
$('#test1').on('submit', function(obj){
//console.log(obj.field)
//return false;
});
});
</script>

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

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

12
examples/json/table/demo3.json
View File

@@ -6,7 +6,7 @@
"list": [{
"id": "10001"
,"username": "杜甫3"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
@@ -17,7 +17,7 @@
}, {
"id": "10002"
,"username": "李白3"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
@@ -29,7 +29,7 @@
}, {
"id": "10003"
,"username": "王勃"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -40,7 +40,7 @@
}, {
"id": "10004"
,"username": "李清照"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -51,7 +51,7 @@
}, {
"id": "10005"
,"username": "冰心"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -62,7 +62,7 @@
}, {
"id": "10006"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"email": "test@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"

51
examples/laydate.html
View File

@@ -108,19 +108,28 @@ 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.set({
//trigger: 'focus'
})
//双控件
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
,trigger: 'click'
,lang: 'en'
//,lang: 'en'
,range: true //开启日期范围，默认使用“_”分割
//,theme: 'grid'
,range: true //开启日期范围，默认使用“-”分割
//,min: '1949-10-1'
//,max: '2021-5-9'
//,value: '2021-05-09 12:06:09'
//,value: '2021-05-08 - 2021-03-27'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -129,15 +138,16 @@ layui.use('laydate', function(){
}
});
//return;
//单控件
laydate.render({
elem: '#test2'
//,format: 'yyyy年MM月dd日'
//,value: new Date(1989,9,14)
,isInitValue: false
,format: 'yyyyMMdd'
,value: '20170910'
,value: new Date(1534766888000)
//,isInitValue: false
,format: 'yyyy/MM/dd'
,min: 7
//,max: 0
//,min: '2016-10-14'
//,max: -1
@@ -148,6 +158,9 @@ layui.use('laydate', function(){
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
,change: function(value){
console.log(value);
}
});
//年选择器
@@ -168,9 +181,9 @@ layui.use('laydate', function(){
laydate.render({
elem: '#test4'
,type: 'month'
,range: true
//,trigger: 'click'
,max: -30
,range: true
,trigger: 'click'
//,max: -30
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -241,6 +254,7 @@ layui.use('laydate', function(){
,theme: 'molv'
,value: 20180115
,isInitValue: true
,lang: 'en'
//,range: true
,trigger: 'click'
});
@@ -294,16 +308,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 +334,7 @@ layui.use('laydate', function(){
console.log(value)
}
});
});
</script>
</body>

147
examples/layer.html
View File

@@ -5,40 +5,116 @@
<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">
<style>
body{padding: 100px;}
#photos li{float: left; margin: 0 1px 1px;}
#photos img{max-height: 38px;}
</style>
</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
<div id="test11111" style="display: none; padding: 20px;">
content 指向放置在页面的一段隐藏元素
</div>
<hr><br>
<div class="layui-list">
<ul class="layui-row" id="photos">
<li class="list"><img src="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png"></li>
<li class="list"><img src="https://res.layui.com/static/images/fly/fly.jpg"></li>
</ul>
</div>
<script src="../src/layui.js"></script>
<script>
var LAYUI_GLOBAL = {
//path: '../src/'
//,layerPath: '../release/layer/src/'
};
</script>
<script src="../src/layui.js"></script>
<!-- layer 独立版调试 -->
<script src1="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
<script src1="../release/layer/src/layer.js"></script>
<script>
var runTest = function(run, $, layer){
if(!run) return;
var timer = setInterval(function(){
//location.reload();
}, 1000);
layer.alert(123);
$.ajax({
url: './all.html'
,beforeSend: function(){
//layer.ready(function(){
//layer.load();
//});
}
,success: function(){
return;
layer.closeAll('loading', function(){
setTimeout(function(){
if($('.layui-layer-loading').length){
console.error('layer close 异常');
clearInterval(timer);
}
}, 200);
});
}
});
};
window.jQuery && runTest(1, window.jQuery, window.layer);
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
var $ = layui.jquery, layer = layui.layer;
//return
var index = layer.msg('hello');
//layer.close(index);
//runTest(1, $, layer);
//触发事件
var active = {
test: function(){
layer.alert('你好么，体验者');
layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
time: 5*1000
,success: function(layero, index){
var timeNum = this.time/1000, setText = function(start){
layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if(timeNum <= 0) clearInterval(this.timer);
}
,end: function(){
clearInterval(this.timer);
}
});
}
,test2: function(){
layer.confirm('您是如何看待前端开发？', {
@@ -53,24 +129,34 @@ layui.use('layer', function(){
});
}
,test3: function(){
layer.msg('玩命提示中');
layer.msg('提示中');
}
,test4: function(){
layer.tips('Hi，我是一个小提示', this, {tips: 1});
}
,test5: function(){
layer.open({
title:'更新论坛信息',
title:'自定义页面层',
type: 1,
skin: 'layui-layer-rim',
area: ['500px', '580px'],
content: $('#test11111')
area: ['1000px', '580px'],
content: $('#test11111'),
maxmin: true,
minStack: false, //最小化不堆叠在左下角
id: 'page1', //定义 ID，防止重复弹出
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
return false;
}
});
}
,test6: function(){
layer.open({
type: 2
,content: 'http://fly.layui.com/'
,content: 'https://www.aliyun.com/activity?userCode=ap0255is'
,area: ['375px', '500px']
,maxmin: true
});
@@ -99,7 +185,28 @@ layui.use('layer', function(){
}]
});
}
};
//相册层
layer.photos({
photos: '#photos' //$('#photos')
});
$('#photos li-').each(function(i, e){
layer.photos({
photos: $(e)
});
});
//动态追加
$('#photos').append('<li class="list"><img src="https://res.layui.com/static/images/sentsin/night.gif"></li>');
//{"status":1,"msg":"","title":"JSON请求的相册","id":8,"start":0,"data":[{"alt":"layer","pid":109,"src":"//cdn.layui.com/upload/2017_3/168_1488985841996_23077.png","thumb":""},{"alt":"说好的，一起 Fly","pid":110,"src":"//res.layui.com/static/images/fly/fly.jpg","thumb":""},{"alt":"星空如此深邃","pid":113,"src":"//res.layui.com/static/images/sentsin/night.gif","thumb":""}]}
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';

163
examples/layout-admin.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 管理系统大布局 - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">menu group 1</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">menu 1</a></dd>
<dd><a href="javascript:;">menu 2</a></dd>
<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="">the links</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">menu group 2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
<li class="layui-nav-item"><a href="">the links</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
内容主体区域
<br><br>
<blockquote class="layui-elem-quote layui-text">
<ul>
<li>
你也可以单独打开管理界面大布局的演示页面：
<a class="layui-btn layui-btn-normal" href="layuiAdmin.html" target="_blank">单独打开</a>
</li>
<li>
该页面只是简单的管理系统的界面基础布局示例，并不是一整套界面布局方案，您可以关注基于 layui 的通用型管理系统界面模板解决方案：
<a href="/layuiadmin/" target="_blank" class="layui-btn">layuiAdmin</a>
</li>
<li>
layui 之所以赢得如此多人的青睐，更多是在于它“前后界面兼备”的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统的界面需求。
<br>layui 管理基本布局， 致力于让每一位开发者都能轻松搭建自己的管理系统模板。
</li>
</ul>
</blockquote>
<a href="/doc/element/layout.html#admin" target="_blank" class="layui-btn">查看该布局代码</a>
<br><br><br>
<div class="layui-card layui-panel">
<div class="layui-card-header">
下面是充数内容，为的是出现滚动条
</div>
<div class="layui-card-body">
充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
</div>
</div>
<br><br>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="../src/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>

0
examples/layout.html → examples/layout-grid.html
View File

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>

6
examples/rate.html
View File

@@ -68,11 +68,11 @@ layui.use(['rate'], function(){
rate.render({
elem: '#test1'
,length: 3
,value: 2.2
,length: 5
,value: 5
,text: true
,half: true
,setText: function(value){
,setText1: function(value){
var arrs = {
'0.5': '极差'

5
examples/slider.html
View File

@@ -38,6 +38,9 @@ layui.use('slider', function(){
,change: function(value){ //回调实时显示当前值
console.log(value)
}
,setTips: function(value){ //自定义提示文本
return value + '%';
}
//,setTips: function(value){ //自定义提示文本
//return '离世界末日还有 ' + value + ' 天';
//}
@@ -46,7 +49,7 @@ layui.use('slider', function(){
//,theme: '#c00' //主题色
});
sliderInst.setValue(48)
sliderInst.setValue(30);
});
</script>
</body>

266
examples/table-test.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 20px; /*overflow-y: scroll;*/}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<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">重载（不保留初始参数）</button>
<button class="layui-btn layui-btn-sm" id="dropdown">
更多菜单
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="usernameTpl">
<a href="" class="layui-table-link">{{d.username || ''}}</a>
</script>
<script type="text/html" id="switchTpl">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
</script>
<script type="text/html" id="cityTpl">
<select lay-ignore>
<option value="浙江杭州">浙江杭州</option>
<option value="江西南昌">江西南昌</option>
<option value="湖北武汉">湖北武汉</option>
</select>
</script>
<script type="text/html" id="checkboxTpl">
<input type="checkbox" name="" title="锁定" checked>
</script>
<script type="text/html" id="LAY_table_tpl_email">
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
</script>
<table id="test" lay-filter="test"></table>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['table', 'dropdown'], function(){
var table = layui.table
,$ = layui.$
,laytpl = layui.laytpl
,dropdown = layui.dropdown;;
//全局设定某参数
table.set({
where: {
token: '默认 token 参数'
}
//,defaultToolbar: ['filter']
,limit: 30
//,url: 'list'
//,height: 300
});
$('#appendtest').append($('#TPL_appendtest').html())
table.init('appendtest');
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 400
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
,limit: 30
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '帮助'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
console.log(d)
return '<em>'+ d.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120, templet: '#cityTpl'}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }} 😊', templet: '<div>{{ d.experience }} 分</div>'}
,{field:'ip', title:'IP', width: 120}
,{field:'logins', title:'登入次数', width: 100, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 次'}
,{field:'joinTime', title:'加入时间', width: 120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,initSort1: {
field: 'experience' //排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,headers: {headers_token: 'sasasas'}
,where: {
test: '初始 test 参数'
,token: '初始 token'
,key: 'experience'
,order: 'asc'
}
,done: function(){
//下拉菜单
dropdown.render({
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
,data: [{
id: 0,
title: '刷新'
}]
//菜单被点击的事件
,click: function(obj){
table.reload('test');
}
});
}
,error: function(res, msg){
console.log(res, msg)
}
/*
,response: {
statusName: 'status'
,statusCode: 200
}
,parseData: function(res){
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});
//排序事件
table.on('sort(test)', function(obj){
console.log(obj);
return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
}, true);
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
layer.msg('编辑');
break;
case 'delete':
layer.msg('删除');
break;
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
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;
case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v);
break;
case 'reload':
//深度重载
var instReload = table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
,defaultToolbar: ['print']
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols
//,height: 300
//,url: 'x'
}, true);
break;
case 'reload2':
//浅重载
table.reload('test', {
where: {
efg: 'sasasas'
//,test: '新的 test2'
//,token: '新的 token2'
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
//,height: 500
});
break;
};
});
table.on('row(test)', function(obj){
console.log(obj);
//layer.closeAll('tips');
});
});
</script>
</body>
</html>

182
examples/table.html
View File

@@ -3,29 +3,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 20px; /*overflow-y: scroll;*/}
</style>
<style>
body{padding: 20px; /*overflow-y: scroll;*/}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<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="reload">重载（保留初始参数）</button>
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button>
<button class="layui-btn layui-btn-sm" id="dropdown">
更多菜单
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
</script>
<table id="test" lay-filter="test"></table>
<div id="appendtest"></div>
<script type="text/html" id="TPL_appendtest">
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
</tr>
</thead>
</table>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
@@ -58,7 +79,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<table id="test2" lay-filter="test2"></table>
<div style="display: none1;">
<table class="layui-table1" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
@@ -75,7 +96,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</thead>
</table>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', toolbar: '#toolbarDemo', page: true, limit: 6}">
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
<tr>
<th lay-data="{field:'username'}" rowspan="3">联系人</th>
@@ -177,11 +198,28 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</table>
</div>
<script src="../src/layui.js" charset="utf-8"></script>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.0.1/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//return;
layui.use(['table', 'dropdown'], function(){
var table = layui.table
,$ = layui.$
,laytpl = layui.laytpl
,dropdown = layui.dropdown;
//全局设定某参数
table.set({
where: {
token: '全局的 token'
,access: '全局的 access'
}
//,defaultToolbar: ['filter']
,limit: 30
//,url: 'list'
//,height: 300
});
$('#appendtest').append($('#TPL_appendtest').html())
table.init('appendtest');
//渲染
window.ins1 = table.render({
@@ -195,7 +233,7 @@ layui.use('table', function(){
}
,autoSort: false
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
,limit: 30
@@ -205,6 +243,7 @@ layui.use('table', function(){
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,escape: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
@@ -213,14 +252,47 @@ layui.use('table', function(){
return '<em>'+ d.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120, templet: '#cityTpl1'}
,{field:'city', title:'城市', width:120}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }} 分', templet: '<div>{{ d.experience }} 分</div>'}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,initSort1: {
field: 'experience' //排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,headers: {headers_token: 'sasasas'}
,where: $.extend({}, table.config.where, {
test: '渲染的 test'
,token: '渲染的 token'
,key: 'experience'
,order: 'asc'
})
,done: function(){
//下拉菜单
dropdown.render({
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
,data: [{
id: 0,
title: '刷新'
}]
//菜单被点击的事件
,click: function(obj){
table.reload('test');
}
});
}
,error: function(res, msg){
console.log(res, msg)
}
/*
,response: {
statusName: 'status'
@@ -237,9 +309,27 @@ layui.use('table', function(){
*/
});
//排序事件
table.on('sort(test)', function(obj){
console.log(obj);
return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
}, true);
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var config = obj.config;
var checkStatus = table.checkStatus(config.id);
switch(obj.event){
case 'add':
layer.msg('添加');
@@ -258,18 +348,49 @@ 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;
case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v);
layer.alert(config.title || 'Table for layui-v'+ layui.v);
break;
case 'reload':
table.reload('test', {
page: {curr: 5}
//深度重载
var instReload = table.reload('test', {
where: {
abc: 123
,test: '重载的 test'
}
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols
//,height: 300
//,url: 'x'
}, 'data');
}, true);
break;
case 'reload2':
//浅重载
table.reload('test', {
where: {
efg: 'sasasas'
//,test: '新的 test2'
//,token: '新的 token2'
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
//,height: 500
});
break;
};
});
@@ -364,23 +485,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>

3
examples/transfer.html
View File

@@ -50,7 +50,7 @@
,{"value": "3", "title": "贤心"}
,{"value": "4", "title": "鲁迅", "disabled": true}
,{"value": "5", "title": "巴金"}
,{"value": "6", "title": "冰心"}
,{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"},{"value": "6", "title": "冰心"}
]
,id: 'demoId'
,value: ["2", "3"]
@@ -65,6 +65,7 @@
,reload: function(){
transfer.reload('demoId', {
value: ["6"]
//,data: [{"value": "1", "title": "李白"}]
});
}
});

65
examples/upload.html
View File

@@ -16,7 +16,7 @@ hr{margin: 30px 0;}
<body>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<button type="button" class="layui-btn" id="test1" name="123">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" src="" id="demo1">
@@ -45,7 +45,7 @@ hr{margin: 30px 0;}
<thead>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>上传进度</th>
<th>操作</th>
</thead>
<tbody id="demoList"></tbody>
@@ -56,34 +56,38 @@ hr{margin: 30px 0;}
<hr>
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<div class="layui-btn-container">
<button type="button" class="layui-btn test333" lay-data="{size:10,url:'a'}" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary test333" lay-data="{size:20,url:'b'}" id="test33"><i class="layui-icon">&#xe67c;</i>换个样式</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
<button type="button" class="layui-btn" id="test4"><i class="layui-icon">&#xe67c;</i>上传视频</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传音频</button>
</div>
<hr>
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
<div class="layui-btn-container">
<button class="layui-btn testm" lay-data="{url: '/a/'}">参数设在元素上</button>
<button class="layui-btn testm" lay-data="{url: '/b/', accept: 'file',size:5}">参数设在元素上</button>
</div>
<hr>
<div class="layui-upload">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal" id="test6">选择文件</button>
<button type="button" class="layui-btn" id="test7">开始上传</button>
</div>
<hr><br>
<div class="layui-upload-drag" id="test9">
<div class="layui-upload-drag" id="test8">
<i class="layui-icon">&#xe67c;</i>
<p>点击上传，或将文件拖拽到此处</p>
</div>
<hr><br>
绑定原始文件域：<input type="file" name="file" id="test8">
绑定原始文件域：<input type="file" name="file" id="test9">
<script src="../src/layui.js"></script>
<script>
@@ -94,7 +98,7 @@ layui.use(['upload', 'element'], function(){
var uploadInst = upload.render({
elem: '#test1'
,url: 'http://httpbin.org/image'
,url: 'http://httpbin.org/post'
//,size: 2000 //限制文件大小，单位 KB
//,accept: 'file'
,method: 'get'
@@ -114,6 +118,10 @@ layui.use(['upload', 'element'], function(){
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
return;
layer.msg('不允许上传')
return false;
}
,done: function(res){
@@ -122,6 +130,7 @@ layui.use(['upload', 'element'], function(){
return layer.msg('上传失败');
}
//上传成功
console.log(res);
}
,error: function(){
this.item.html('重选上传');
@@ -135,8 +144,8 @@ layui.use(['upload', 'element'], function(){
element.progress('demo', '0%');
}
,progress: function(n){
console.log(n + '%'); //获取进度百分比
,progress: function(n, elem, res, index){
console.log(n + '%', elem, res); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
}
});
@@ -151,7 +160,6 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test2'
,url: ''
,multiple: true
,number: 3
,size: 1024
@@ -173,7 +181,7 @@ layui.use(['upload', 'element'], function(){
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList'
,url: ''
,url: 'http://httpbin.org/post'
,accept: 'file'
,multiple: true
,number: 3
@@ -187,10 +195,10 @@ layui.use(['upload', 'element'], function(){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td><div class="layui-progress" lay-filter="progress-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
@@ -207,17 +215,18 @@ layui.use(['upload', 'element'], function(){
});
demoListView.append(tr);
element.render('progress');
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
//if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
}
//}
this.error(index, upload);
}
,allDone: function(obj){
@@ -226,9 +235,12 @@ layui.use(['upload', 'element'], function(){
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){
console.log(n);
element.progress('progress-'+ index, n + '%'); //进度条
}
});
@@ -288,9 +300,10 @@ layui.use(['upload', 'element'], function(){
,auto: false
//,multiple: true
,bindAction: '#test7'
,choose: function(obj){
,choose1: function(obj){
var that = this;
obj.preview(function(index, file){
console.log(file.name);
obj.resetFile(index, file, '123.jpg');
});
}
@@ -304,7 +317,7 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test8'
,url: ''
,url: 'http://httpbin.org/post'
,done: function(res){
console.log(res);
}
@@ -318,6 +331,8 @@ layui.use(['upload', 'element'], function(){
}
});
});
</script>
</body>

28
examples/util.html
View File

@@ -17,6 +17,8 @@ body{padding: 50px;}
<button class="layui-btn" lay-active="e2">事件2</button>
<button class="layui-btn" lay-active="e3">事件3</button>
<button class="layui-btn" lay-active2="e4">事件4</button>
<hr>
<div id="test"></div>
@@ -60,14 +62,28 @@ layui.use('util', function(){
//处理属性 为 lay-active 的所有元素事件
util.event('lay-active', {
e1: function(){
alert('事件1')
e1: function(othis){
alert(othis.html())
}
,e2: function(){
alert('事件2')
,e2: function(othis){
alert(othis.html())
}
,e3: function(){
alert('事件3')
,e3: function(othis){
alert(othis.html())
}
});
//测试是否重复绑定
util.event('lay-active', {
e1: function(othis){
alert(othis.html() + '新事件')
}
});
//测试绑定新事件
util.event('lay-active2', {
e4: function(othis){
alert(othis.html())
}
});