<!DOCTYPE html>
<html>
<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=
"//res.layui.com/layui/dist/css/layui.css?t=1591161919722"
media=
"all"
>
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<table
class
=
"layui-hide"
id=
"demo"
lay-filter=
"test"
></table>
<script type=
"text/html"
id=
"barDemo"
>
<a
class
=
"layui-btn layui-btn-primary layui-btn-xs"
lay-event=
"detail"
>查看</a>
<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>
<div
class
=
"layui-tab layui-tab-brief"
lay-filter=
"demo"
>
<ul
class
=
"layui-tab-title"
>
<li
class
=
"layui-this"
>演示说明</li>
<li>日期</li>
<li>分页</li>
<li>上传</li>
<li>滑块</li>
</ul>
<div
class
=
"layui-tab-content"
>
<div
class
=
"layui-tab-item layui-show"
>
<div
class
=
"layui-carousel"
id=
"test1"
>
<div carousel-item>
<div><p
class
=
"layui-bg-green demo-carousel"
>在这里,你将以最直观的形式体验 layui!</p></div>
<div><p
class
=
"layui-bg-red demo-carousel"
>在编辑器中可以执行 layui 相关的一切代码</p></div>
<div><p
class
=
"layui-bg-blue demo-carousel"
>你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
<div><p
class
=
"layui-bg-orange demo-carousel"
>如果最左侧的导航的高度超出了你的屏幕</p></div>
<div><p
class
=
"layui-bg-cyan demo-carousel"
>你可以将鼠标移入导航区域,然后滑动鼠标滚轮即可</p></div>
</div>
</div>
</div>
<div
class
=
"layui-tab-item"
>
<div id=
"laydateDemo"
></div>
</div>
<div
class
=
"layui-tab-item"
>
<div id=
"pageDemo"
></div>
</div>
<div
class
=
"layui-tab-item"
>
<div
class
=
"layui-upload-drag"
id=
"uploadDemo"
>
<i
class
=
"layui-icon"
></i>
<p>点击上传,或将文件拖拽到此处</p>
<div
class
=
"layui-hide"
id=
"uploadDemoView"
>
<hr>
<img src=
""
alt=
"上传成功后渲染"
style=
"max-width: 100%"
>
</div>
</div>
</div>
<div
class
=
"layui-tab-item"
>
<div id=
"sliderDemo"
style=
"margin: 50px 20px;"
></div>
</div>
</div>
</div>
<blockquote
class
=
"layui-elem-quote layui-quote-nm layui-hide"
id=
"footer"
>layui {{ layui.v }} 提供强力驱动</blockquote>
<script src=
"//res.layui.com/layui/dist/layui.js?t=1591161919722"
></script>
<script>
layui.config({
version: '1591161919722'
});
layui.
use
(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'],
function
(){
var
laydate = layui.laydate
,laypage = layui.laypage
,layer = layui.layer
,table = layui.table
,carousel = layui.carousel
,upload = layui.upload
,element = layui.element
,slider = layui.slider
layer.msg('Hello World');
element.on('tab(demo)',
function
(data){
layer.tips('切换了 '+ data.index +':'+ this.innerHTML, this, {
tips: 1
});
});
table.render({
elem: '#demo'
,height: 420
,url: '/demo/table/user/'
,title: '用户表'
,page: true
,toolbar: '
default
'
,totalRow: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
,{field: 'username', title: '用户名', width:80}
,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
,{field: 'city', title: '城市', width:150}
,{field: 'sign', title: '签名', width: 200}
,{field: 'classify', title: '职业', width: 100}
,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
table.on('toolbar(test)',
function
(obj){
var
checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data;
switch
(obj.event){
case
'add':
layer.msg('添加');
break
;
case
'update':
if
(data.length === 0){
layer.msg('请选择一行');
}
else
if
(data.length > 1){
layer.msg('只能同时编辑一个');
}
else
{
layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
}
break
;
case
'
delete
':
if
(data.length === 0){
layer.msg('请选择一行');
}
else
{
layer.msg('删除');
}
break
;
};
});
table.on('tool(test)',
function
(obj){
var
data = obj.data
,layEvent = obj.event;
if
(layEvent === 'detail'){
layer.msg('查看操作');
}
else
if
(layEvent === 'del'){
layer.confirm('真的删除行么',
function
(index){
obj.del();
layer.close(index);
});
}
else
if
(layEvent === 'edit'){
layer.msg('编辑操作');
}
});
carousel.render({
elem: '#test1'
,width: '100%'
,height: 200
,arrow: 'none'
,anim: 'fade'
});
var
dateIns = laydate.render({
elem: '#laydateDemo'
,position: '
static
'
,calendar: true
,mark: {
'0-10-14': '生日'
,'2020-01-18': '小年'
,'2020-01-24': '除夕'
,'2020-01-25': '春节'
,'2020-02-01': '上班'
}
,done:
function
(value,
date
, endDate){
if
(
date
.year == 2017 &&
date
.month == 11 &&
date
.
date
== 30){
dateIns.hint('一不小心就月底了呢');
}
}
,change:
function
(value,
date
, endDate){
layer.msg(value)
}
});
laypage.render({
elem: 'pageDemo'
,
count
: 100
,skin: '#1E9FFF'
,jump:
function
(obj, first){
if
(!first){
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
upload.render({
elem: '#uploadDemo'
,url: 'https:
,done:
function
(res){
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
console.log(res)
}
});
var
sliderInst = slider.render({
elem: '#sliderDemo'
,input: true
});
var
footerTpl = lay('#footer')[0].innerHTML;
lay('#footer').html(layui.laytpl(footerTpl).render({}))
.removeClass('layui-hide');
});
</script>
</body>
</html>