`
lee.org
  • 浏览: 2685 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多

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

(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>

 

 

  • 大小: 840 Bytes
分享到:
评论

相关推荐

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    101. 打包基于jQuery对图片边框修饰插件示例下载(支持图片阴影效果、顶部banner效果、邮票边框、毛边相框、云朵包围效果) 102. 推荐jquery仿Flash大banner图片切换播放特效,非常完美 103. 推荐jQuery仿新浪QQ绝...

    jquery插件使用方法大全

    plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介  jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...

    jquery 动态示例

    33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色...

    100多个JQuery效果示例(实例)div+css+javascrpit

    33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...

    基于jQuery下拉选择框插件支持单选多选功能代码

    由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui。 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:...

    jQuery权威指南-源代码

    内容新颖,基于jQuery的最新版本撰写,所有新功能和新特性一览无余;内容全面,不仅讲解了jQuery技术本身的方方面面,而且还包括与jQuery相关的扩展知识;实战性强,不仅每个知识点都配有完整的小案例,而且还有两个...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    jquery基础教程高清版PDF.part5.rar

     6.1 基于请求加载数据   6.1.1 追加HTML   6.1.2 操作JavaScript对象   6.1.3 加载XML 文档   6.2 选择数据格式   6.3 向服务器传递数据   6.3.1 执行GET请求   6.3.2 执行POST请求   ...

    动态表:动态表jQuery插件-可以对表进行排序,过滤和编辑的方法,类似于常见的电子表格应用程序

    产品特点电子表格的感觉通过AJAX加载数据分页滚动(轻松处理成千上万行) 筛选和排序可编辑字段精选活动基于jQuery UI先决条件jQuery的jQuery UI moment.js-这是可选的,以便更好地呈现日期。 但是,您必须确保它在...

    Jqgrid之强大的表格插件应用

    jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性: 基于...

    Jqury基础教程

    6.1 基于请求加载数据 6.1.1 追加HTML 6.1.2 操作JavaScript对象 6.1.3 加载XML文档 6.2 选择数据格式 6.3 向服务器传递数据 6.3.1 执行GET请求 6.3.2 执行POST请求 6.3.3 序列化表单 6.4 关注请求 6.5 ...

    MyHtml:项目开发过程总结的一些常用效果基于(jquery-1.8.3)

    项目开发过程总结的一些常用效果基于(jquery-1.8.3) 1、ajax远程请求数据,请求时刻菊花狂转,请求成功,数据停止转动,再次请求提示数据存在 2、checkbox全选,反选...4、基于插件jquery.lazyload.js插件的图片加载

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    基于cookie实现定制显示数据条数 带签名的Cookie CBV和FBV用户认证装饰器 本周作业 第22周 上节回顾 Django之url、Views Django之Model操作 Django之模版 Django之Session Django之Session与Cookie Django之CSRF...

    基于EasyUIdatagrid实现数据库操作的方法 (2012年)

    而JqueryUI作为前端视图的一种流行插件,也正逐渐得到广泛应用。其中Datagrid是数据库WEB页面呈现较频繁的一种样式,设计中,数据在呈现于WEB页面前,已事先被封装为JSON格式的数据,数据和显示及控制是分开进行的。

    Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等。 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都...

    基于PHP和Mysql相结合使用jqGrid读取数据并显示

    jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程。 下面给大家展示效果图,喜欢的朋友可以阅读全文哦。 jqGrid...

Global site tag (gtag.js) - Google Analytics