philosophyship-mobile
Version:
philosophship-mobile 手机端H5 ui 样式库
47 lines • 1.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../src/tuitui-ui.css">
<title>推推UI-Toast提示组件</title>
</head>
<body>
<div class="tt-content">
<h1 class="tt-panel-title">Toast提示组件</h1>
<div class="tt-panel-body">
<a class="tt-btn btn-primary" id="js-show-toast-loading">加载中提示</a>
<br>
<a class="tt-btn btn-primary" id="js-show-toast-success">成功提示</a>
</div>
</div>
<div class="tt-toast" id="js-toast-loading">
<i class="fa fa-spinner fa-spin tt-toast-icon"></i>
<p class="tt-toast-info">操作进行中</p>
</div>
<div class="tt-toast" id="js-toast-success">
<i class="fa fa-check tt-toast-icon"></i>
<p class="tt-toast-info">操作成功</p>
</div>
</body>
<script>
window.onload = ()=>{
// 显示加载中的Toast
document.querySelector('#js-show-toast-loading').onclick = (e) => {
let toastEle = document.querySelector('#js-toast-loading');
toastEle.classList.add('show');
setTimeout(()=> {
toastEle.classList.remove('show');
}, 2e3);
};
// 显示操作成功的Toast
document.querySelector('#js-show-toast-success').onclick = (e) => {
let toastEle = document.querySelector('#js-toast-success');
toastEle.classList.add('show');
setTimeout(()=> {
toastEle.classList.remove('show');
}, 2e3);
};
};
</script>
</html>