`
lee.org
  • 浏览: 2802 次
  • 性别: 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
分享到:
评论

相关推荐

    jquery mobile分页显示插件

    "jQuery Mobile 分页显示插件"正是为了解决这个问题,提供了便捷的工具来实现这一功能。 这个插件允许开发者在页面上创建动态分页,以展示有限数量的数据,并通过导航链接让用户轻松地在不同页面之间切换。以下是...

    基于JQuery开发的弹窗插件

    【标题】基于JQuery开发的弹窗插件 在Web开发中,弹窗是一种常见的交互方式,用于显示警告、确认信息或提供用户输入等。JQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    jquery.DataLazyLoad数据延迟加载插件

    jQuery DataLazyLoad插件是基于JavaScript库jQuery设计的,用于延迟加载页面中的图片、iframe、div等元素。通过这种方式,页面初始加载时只会显示可见区域的内容,当用户滚动页面时,隐藏的元素才会被动态加载,从而...

    基于jQuery的对象切换插件,JQuery图片切换

    1. **元素选择与初始化**:在文档加载完成后,插件会找到预设的图片容器,并存储相关数据,如图片数组、当前显示图片的索引等。 2. **事件绑定**:插件通常会监听鼠标点击或键盘事件,当触发时执行切换操作。 3. *...

    基于jquery的图片裁剪插件

    基于jQuery的图片裁剪插件为此提供了便利,它允许用户在浏览器中预览并裁剪图片,然后以所需尺寸上传。本文将深入探讨此类插件的核心原理、应用场景以及如何实现。 ### 1. jQuery框架基础 jQuery是一个广泛使用的...

    基于jquery的树形插件

    **基于jQuery的树形插件**是前端开发中常用的一种组件,它可以帮助开发者在网页上构建出层次结构清晰、交互性强的目录或组织结构。在本文中,我们将深入探讨这种插件的工作原理、优势以及如何在项目中进行有效集成。...

    jquery原创动画加载层插件Loading

    本文将详细解析一个基于jQuery的原创动画加载层插件——"Loading",并探讨其核心概念、功能及应用。 一、jQuery加载层插件的基本概念 加载层(Loading)是一种用户界面元素,用于在网页内容加载期间向用户提供反馈...

    jquery表格树插件GridTree懒加载版本(开源,含demo)

    为了解决这一问题,出现了jQuery表格树插件GridTree的懒加载版本,它巧妙地运用了Ajax技术,优化了数据加载策略,极大地提高了大容量数据的显示效率。 一、懒加载技术介绍 懒加载,也称为延迟加载或按需加载,是一...

    基于jQuery的拖动排序插件

    在本文中,我们将深入探讨基于jQuery的拖动排序插件,这是一种用于实现表格行拖动排序功能的强大工具。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得开发者能够更轻松地创建交互...

    基于jquery的imgbox图片预览插件Demo源码

    `jQuery imgBox` 插件基于 `jQuery`,因此具备良好的浏览器兼容性。但在使用过程中,应注意图片加载性能优化,如使用懒加载、预加载等技术,以提升用户体验。 总结,`jQuery imgBox` 是一个强大且易于使用的图片...

    基于jquery的验证提示插件

    基于jQuery的验证插件为此提供了一种便捷而高效的方法。本文将详细介绍一个名为"my_validator"的jQuery验证插件,并探讨其核心功能和自定义验证规则。 ### 插件概述 "my_validator"是一个轻量级的jQuery插件,它的...

    基于jquery的评论回复插件源码

    综上所述,"基于jQuery的评论回复插件源码"是一个结合了前端技术与交互设计的实用工具,它充分利用jQuery的功能,实现了用户友好的评论和回复功能,提升了网站的互动性。开发者可以通过学习和修改这个插件,来定制...

    基于jQuery的双日历插件pickerDateRange修改版

    本文将详细探讨基于jQuery的双日历插件pickerDateRange的修改版,以及如何在项目中有效地利用它。 首先,我们要了解jQuery双日历插件pickerDateRange的主要功能。这个插件允许用户选择一个日期范围,通常用于预订...

    jQuery动态表格数据分页插件

    jQuery动态表格数据分页插件就是基于jQuery构建的,利用其强大的功能来处理表格数据的分页逻辑。 在网页设计中,动态表格通常用于显示结构化的数据,如数据库查询结果。这种插件的核心功能是能够在不刷新整个页面的...

    基于jquery的倒计时插件.zip

    【标题】"基于jQuery的倒计时插件"是一个用于网页动态显示倒计时功能的JavaScript库,它利用了广泛使用的jQuery框架的强大功能。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax...

    jQuery加载动画插件shCircleLoader

    3. **图片预加载**:大图或多图加载时,显示加载提示,让用户知道图片正在加载。 总之,shCircleLoader作为一个轻量级且功能丰富的jQuery加载动画插件,为开发者提供了一种简单、高效的方式来增强网页的用户体验。...

    Jquery和jquery的常用插件

    1. **zTree**:zTree是一个强大的基于jQuery的树形插件,广泛应用于网站的导航菜单、数据展示、文件目录管理等场景。它支持多选、单选、拖拽、异步加载等功能,提供了丰富的API和配置项,可以灵活定制树形结构的样式...

    基于jquery的dialog插件

    "基于jQuery的dialog插件"是一种扩展jQuery功能的组件,用于实现弹出对话框效果,通常用于展示警告信息、确认操作或者进行表单输入等场景。 这个自编写的dialog插件以其轻量级而著称,仅有3KB大小,这意味着它对...

    jQuery Pagination 基于jquery的分页插件.zip

    以上是对 "jQuery Pagination 基于jquery的分页插件" 的详细说明,它为开发者提供了一种快速、灵活的实现前端分页的解决方案。通过理解这个插件的工作原理和使用方法,可以有效地改善网页的性能和用户交互体验。

Global site tag (gtag.js) - Google Analytics