每天一个jquery插件-简易提示框
简易提示框
这个效果很常见，并且经常见，所以自己尝试做一个简易的效果出来，为可能的扩展记点笔记
代码实现如下
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示插件</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/tishi.js"></script>
<link href="css/tishi.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><button id="btn1" type="button">警告框</button></li>
<li><button id="btn2" type="button">成功框</button></li>
<li><button id="btn3" type="button">失败框</button></li>
<li><button id="btn4" type="button">加载框</button></li>
</ul>
</body>
</html>
<script>
$(function(){
$("#btn1").click(function(){
tishi({
type:'warn',msg:'一条警告提示'}).show(3000)
})
$("#btn2").click(function(){
tishi({
type:'success',msg:'一条成功提示'}).show()
})
$("#btn3").click(function(){
tishi({
type:'error',msg:'一条失败提示'}).show()
})
$("#btn4").click(function(){
tishi({
type:'load',msg:'一条加载信息'}).show()
})
})
</script>
css部分
.tishi{
border: 1px solid lightgray;
position: absolute;
padding: 5px 10px;
border-radius: 5px;
box-shadow: 0 0 1px 1px lightgray;
display:flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.ts-warn,.ts-success,.ts-error,.ts-load{
font-size: 20px!important;
margin-right: 5px;
}
.ts-warn{
color: rgb(90,157,185);
}
.ts-success{
color: rgb(113,171,32);
}
.ts-error{
color: rgb(209,104,70);
}
.ts-load{
color: gray;
}
.ts-msg{
font-size: 12px;
color: gray;
}
js部分
var tishi = function(options) {
var $tishi = null;
switch (options.type) {
case 'warn':
$tishi = $("<div class='tishi'><span class='fa fa-exclamation-circle ts-warn'></span><span class='ts-msg'>" + options.msg + "</span></div>")
break;
case 'success':
$tishi = $("<div class='tishi'><span class='fa fa-check-circle ts-success'></span><span class='ts-msg'>" + options.msg + "</span></div>")
break;
case 'error':
$tishi = $("<div class='tishi'><span class='fa fa-times-circle ts-error'></span><span class='ts-msg'>" + options.msg + "</span></div>")
break;
case 'load':
$tishi = $("<div class='tishi'><span class='fa fa-spinner fa-spin ts-load'></span><span class='ts-msg'>" + options.msg + "</span></div>")
break;
default:
$tishi = $("<div class='tishi'><span class='fa fa-question-circle'></span><span class='ts-msg'>该提示框未配置正确</span></div>")
break;
}
return {
$tishi,
show: function(t) {
t=t==undefined?2000:t;
var that = this;
//首先关闭当前所有存在的提示框
$(".tishi").remove();
that.$tishi.appendTo($("body"))
var x = $(document).width()/2-that.$tishi.width()/2;
var y = $(document).height()/2-that.$tishi.height()/2;
that.$tishi.css({
"left":x,
"top":y
})
setTimeout(function(){
that.$tishi.remove();
},t)
}
}
}