mirror of https://github.com/layui/layer
79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>手机版测试</title>
|
|
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
|
|
<script src="dist/mobile/layer.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'seanfont', "microsoft yahei";
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: #333;
|
|
padding: 10px;
|
|
margin: 0;
|
|
}
|
|
h1 {
|
|
font-size: 16px;
|
|
}
|
|
h2 {
|
|
font-size: 14px;
|
|
}
|
|
.btn {
|
|
margin: 0 10px 10px 0;
|
|
padding: 0 18px;
|
|
display: inline-block;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
background-color: #fff;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
border: 1px solid #C9C9C9;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>点击下面的按钮体验新功能：</h1>
|
|
<h2>加载：</h2>
|
|
<div class="btn" id="loading0">layer原有的loading</div>
|
|
<div class="btn" id="loading1">loadingType: 1</div>
|
|
<div class="btn" id="loading2">loadingType: 2</div>
|
|
<div class="btn" id="loading3">loadingType: 3</div>
|
|
<div class="btn" id="loading4">loadingType: 4</div>
|
|
<div class="btn" id="loading5">loadingType: 5</div>
|
|
<div class="btn" id="loading6">loadingType: 6</div>
|
|
|
|
<script>
|
|
$(function(){
|
|
$("#loading0").on("click", function(){
|
|
layer.open({type: 2, content: '数据加载中...'});
|
|
});
|
|
$("#loading1").on("click", function(){
|
|
layer.open({type: 2, loadingType: 1, content: '数据加载中...', anim: false});
|
|
});
|
|
$("#loading2").on("click", function(){
|
|
layer.open({type: 2, loadingType: 2, content: '数据获取成功'});
|
|
});
|
|
$("#loading3").on("click", function(){
|
|
layer.open({type: 2, loadingType: 3, content: '数据获取失败'});
|
|
});
|
|
$("#loading4").on("click", function(){
|
|
layer.open({type: 2, loadingType: 4, content: '数据加载中...', anim: false});
|
|
});
|
|
$("#loading5").on("click", function(){
|
|
layer.open({type: 2, loadingType: 5, content: '数据获取成功'});
|
|
});
|
|
$("#loading6").on("click", function(){
|
|
layer.open({type: 2, loadingType: 6, content: '数据获取失败'});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |