<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../layui/layui.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-tab" lay-filter="demo">
<ul class="layui-tab-title" >
<li class="layui-tab-title">ip</li>
<li class="layui-this">网络设置</li>
<li>商品管理</li>
<li>订单管理</li>
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容二</div>
<div class="layui-tab-item">内容三</div>
<div class="layui-tab-item">内容四</div>
</div>
</div>
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
<button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
<button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
</div>
<script>
layui.use('element',function () {
var element = layui.element;
//一些事件的监听
element.on('tab(demo)', function (data) {
console.log(data);
});
element.progress('demo', '100%');
//出发事件
//模拟loading
var n = 0, timer = setInterval(function () {
n = n + Math.random() * 10 | 0;
if (n > 100) {
n = 100;
clearInterval(timer);
othis.removeClass(DISABLED);
}
element.progress('demo', n + '%');
}, 300 + Math.random() * 1000);
4-1，常用元素操作-layui.element
猜你喜欢
转载自blog.csdn.net/weixin_34274029/article/details/86958269
今日推荐
周排行