基于jquery的数据加载提示插件

最新推荐文章于 2021-08-05 18:38:48 发布

enjoymaking

最新推荐文章于 2021-08-05 18:38:48 发布

阅读量170

点赞数

分类专栏： jquery插件文章标签： jquery 插件进度条

本文链接：https://blog.csdn.net/nothought/article/details/41863297

版权

jquery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目中需要一个数据加载插件，网上找了很多没有找到想要的效果，于是自己写了一个简单的。代码如下：

(function($){
	$.fn.extend({
		"enjoymaking.ui.DynMsg":function()
		{
			var self = this;
			var dynMsg = null;
			var interval = null;
			var i = 3;
			self.init = function()
			{
				self.html('<div class="dynMsg" style="color:#f00;font-weight: bold;width:260px;">数据加载中，请等候<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></div>');
				dynMsg = self.find(".dynMsg");
				interval = setInterval(function(){
					if(i == 3){
						i = -1;
						dynMsg.find("span.dot").css("visibility","hidden");
					}
					if(i!=-1){
						dynMsg.find("span.dot").eq(i).css("visibility","visible");
					}
					i++;
					
				},500);
			}
			
			self.clear = function(){
				clearInterval(interval);
			}
			return self;
		}
	});
})(jQuery);

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>demo.html</title>
  	<script src="jquery-1.6.2.min.js"></script>
	<script src="enjoymaking.ui.DynMsg.js"></script>
  </head>
  <body>
    <div id="msg"></div>
  	<script type="text/javascript">
  		 $(document).ready(function(){
    		var dynMsg = $("#msg")["enjoymaking.ui.DynMsg"]();
    		dynMsg.init();
    	 });
  	</script>
  </body>
</html>