jQuery------loading提示

1、效果图

 

1、html代码

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>eventTips</title>
	<link rel="stylesheet" type="text/css" href="css/tips.less">
</head>
<body>
      <a href="#" class='success-btn'>成功</a>
      <a href="#" class = 'error-btn'>失败</a>
      <a href="#" class = 'wait-btn'>等待</a>
      <script type="text/javascript" src='js/jquery-2.2.1.min.js'></script>
      <script type="text/javascript" src='js/tips.js'></script>
      <script type="text/javascript">
      	 var tips = new EventTips();
         var successBtn = $(".success-btn");
         var errorBtn = $(".error-btn");
         var waitBtn = $(".wait-btn");
      	 successBtn.on("click",function(){
           tips.success("加载成功！");
      	 })
      	 errorBtn.on("click",function(){
           tips.error("加载失败！");
      	 })
      	 waitBtn.on("click",function(){
           tips.wait("加载等待！");
      	 })
      </script>
</body>
</html>

　　2、less代码

body, html {
	width: 100%;
	height: 100%;
}
.event-tips-float {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	z-index: 100;
}
.event-tips-content {
	width: 100%;
	height: 100%;
	display: block;
    justify-content: center;
    align-items: center;
}
.event-tips-box {
	width: 300px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-right: 100px;
	border-radius: 10px;
	border: 1px solid #ccc;
	background: rgba(255, 255, 255, 0.9);
	padding: 30px 0;
	box-sizing: border-box;
}

.event-tips-icon {
	width: 50px;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
}

.event-tips-msg {
	width: 100%;
	text-align: center;
	margin-top: 20px;
	font-size: 18px;
	line-height: 30px;
}

.tips-success {
	background: url('../imgs/tips-icon-success.png') 100% center no-repeat;
	background-size: 100%;
}

.tips-wait {
	background: url('../imgs/tips-icon-wait.png') 100% center no-repeat;
	animation : tipswait 1s linear infinite;
	background-size: 100%;
}

.tips-err {
	background: url('../imgs/tips-icon-err.png') 100% center no-repeat;
	background-size: 100%;
}


@keyframes tipswait {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform :rotate(360deg);
	}
}

　　

 

 

3、js代码

var EventTips = (function(window, $) {

	function Tips() {
		this.version = "0.01";
		this.author = "";
		this.init();
	}

	Tips.prototype.init = function() {

		var tipsFloat = $('<div>').addClass('event-tips-float');
		var tipsBox = $('<div>').addClass('event-tips-box');
		var tipsIcon = $('<div>').addClass('event-tips-icon');
		var tipsMsg = $('<div>').addClass('event-tips-msg');
		tipsBox.append(tipsIcon,tipsMsg);
		tipsFloat.append(tipsBox);
		$('body').prepend(tipsFloat);
	}

	Tips.prototype.error = function(string, time) {
		$('.event-tips-float').show();
		var time = time || 1000;
		$('.event-tips-float').find('.event-tips-icon').addClass('tips-err').removeClass('tips-success tips-wait');
		$('.event-tips-float').find('.event-tips-msg').html(string);
		var timer = setTimeout(function() {
			$('.event-tips-float').hide();
			clearTimeout(timer);
		}, time);
	}

	Tips.prototype.success = function(string, time) {
		var time = time || 1000;
		$('.event-tips-float').show();
		$('.event-tips-float').find('.event-tips-icon').addClass('tips-success').removeClass('tips-wait tips-err');
		$('.event-tips-float').find('.event-tips-msg').html(string);
		var timer = setTimeout(function() {
			$('.event-tips-float').hide();
		    clearTimeout(timer);
		}, time);
	}

	Tips.prototype.wait = function(string) {
		var that = this;
		$('.event-tips-float').show();
		$('.event-tips-float').find('.event-tips-icon').addClass('tips-wait').removeClass('tips-success tips-err');
		$('.event-tips-float').find('.event-tips-msg').html(string);
		var timer = setTimeout(function() {
			that.error('请求失败！请重试');
			clearTimeout(timer);
		}, 10000);
	}

	return Tips;
})(window, jQuery);

　　

 

posted @ 2017-09-25 16:06  SunLike阿理旺旺  阅读(330)  评论(0)    收藏  举报