最近项目中需要一个数据加载插件,网上找了很多没有找到想要的效果,于是自己写了一个简单的。代码如下:
(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);
<!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>