`
vakin.jiang
  • 浏览: 147196 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

基于Jquery的加载状态提示插件

阅读更多
 /**
 * progressDialog for jQuery
 * Written by vakin Jiang (mailto: chiang.www@gmail.com)
 * Date: 2010/7/30
 * @author vakin
 * @version 1.0
 * 
 * @example
 * $(document).progressDialog.showDialog();
 * 
 *  $.ajax({
	  .....
	  complete:function(data){
	    $(document).progressDialog.hideDialog();
	    //do something
	  }
	});
 **/
(function($) {
	$.fn.progressDialog = function() {

	};

	$.fn.progressDialog.showDialog = function(text) {
		text = text || "Loading,Please wait..."
		createElement(text);
		setPosition();
		waterfall.appendTo("body");
		$(window).bind('resize', function() {
			setPosition();
		});
	}

	$.fn.progressDialog.hideDialog = function(text) {
		waterfall.remove();
	}

	function createElement(text) {
		if (!waterfall) {
			waterfall = $(document.createElement("div"));
			waterfall.attr("id", "waterfall");
			waterfall.css( {
				"height" : "100%",
				"width" : "100%",
				"filter" : "alpha(opacity = 50)",
				"-moz-opacity" : "0.5",
				"opacity" : "0.5",
				"background-color" : "#CCCCCC",
				"position" : "absolute",
				"left" : "0px",
				"top" : "0px"
			});
		}
		if (!loadDiv) {
			loadDiv = document.createElement("div");
		}
		$(loadDiv).appendTo(waterfall);
		
		var content = "<span>"+text+"</span>";
		$(loadDiv).html(content);
	}

	function setPosition() {
		var leftOffset = ($(document).width() - 120) / 2;
		var topOffset = ($(document).height() - 60) / 2;
		$(loadDiv).css( {
			"position" : "absolute",
			"height" : "60px",
			"width" : "120px",
			"left" : leftOffset + "px",
			"top" : topOffset + "px"
		});
	}

	var waterfall;
	var loadDiv;
})(jQuery);


http://plugins.jquery.com/node/16950/release
分享到:
评论

相关推荐

    基于jQuery的拖动排序插件

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

    基于jquery的倒计时插件.zip

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

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

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

    jQuery加载动画插件shCircleLoader

    这款插件特别适合那些需要时间加载大量数据或者资源的网站,它可以向用户展示一个动态的加载状态,缓解用户的等待焦虑。 **一、shCircleLoader的主要特性** 1. **易用性**:shCircleLoader设计简洁,易于集成到...

    基于jquery的dialog插件

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

    jQuery 提示框插件

    提示框插件通常是基于jQuery构建的,利用其强大的功能来增强网页的用户体验。通过引入这样的插件,开发者可以轻松地添加弹出对话框、警告消息、确认提示等,而无需编写大量的自定义代码。 例如,一个常见的jQuery...

    jQuery消息提示框插件Tipso.zip

    7. **兼容性**:作为基于jQuery的插件,Tipso具有良好的浏览器兼容性,支持主流的现代浏览器以及部分旧版浏览器。 使用Tipso插件的步骤大致如下: 1. **引入依赖**:首先确保页面已经引入了jQuery库,然后引入...

    jQuery工作流程步骤进度插件

    ystep是一款基于jQuery的高效插件,它能帮助开发者轻松创建具有视觉吸引力的步骤进度条,提供用户友好的交互体验。下面我们将深入探讨ystep插件的使用方法、功能特性以及如何将其集成到项目中。 首先,ystep插件的...

    jQuery城市级联插件

    城市级联插件基于jQuery的核心功能,利用DOM操作、事件监听和Ajax异步请求等技术实现。当用户选择一个国家或省份时,插件会动态加载并显示相应的城市列表。这一过程的关键在于数据的获取和渲染,通常通过JSON格式的...

    jQuery顶部通知提示插件

    这个插件基于流行的JavaScript库jQuery构建,使得开发者能够轻松地集成到自己的项目中,提高用户体验。 首先,jQuery的核心优势在于其简洁的API和强大的DOM操作功能,这使得创建动态通知变得简单易行。通过调用...

    jquery 星级评分插件

    本篇文章将深入探讨一个基于jQuery的五角星评分插件的使用方法。 该插件名为“wbotelhos/raty”,在压缩包文件中提供了示例(demo)和必要的JavaScript资源,允许开发者快速地在项目中实现五星评级功能。只需简单...

    基于jquery的打分插件显示星形图标插件打分评价插件

    **基于jQuery的打分插件实现详解** 在Web开发中,用户评分系统是常见的功能,它可以帮助用户对产品或服务进行直观的评价。基于jQuery的打分插件就是实现这一功能的有效工具,它通常通过显示星形图标来让用户进行...

    jquery底部提示条插件

    这个插件通常基于jQuery构建,通过监听页面中的特定事件,如按钮点击、表单提交等,然后在页面底部显示预设的消息。这些消息可以是动态生成的,也可以是从服务器获取的数据。当事件触发时,插件会创建一个提示条元素...

    preloader是一款小巧的jQuery页面预加载loading指示器插件

    **JavaScript开发:提示加载状态的库——preloader插件** 在网页设计中,用户体验是至关重要的因素之一。当用户点击一个链接或者启动一个资源密集型的操作时,他们往往期待能够看到一个反馈,告知他们页面正在加载...

    基于jquery实现的多选下拉框

    这个基于jQuery的多选下拉框实例展示了如何通过JavaScript库增强HTML元素的功能,同时也提醒我们在实际开发中需要关注浏览器兼容性和用户体验。在实际项目中,可以进一步优化代码,例如使用CSS3来美化下拉框样式,...

    UPLOADIFY v3.1 基于jquery的上传插件.zip

    **上传插件 UPLOADIFY v3.1:基于jQuery的高效解决方案** 在网页开发中,用户交互体验至关重要,其中文件上传功能是不可或缺的一部分。UPLOADIFY v3.1 是一个高效的jQuery插件,它提供了友好的界面和流畅的用户体验...

    jQuery圆形进度百分比插件–circliful

    **jQuery圆形进度百分比插件 – ...总的来说,circliful是一个强大且灵活的jQuery插件,它使得在网页上创建美观的圆形进度条变得简单易行,无论是用于数据可视化还是加载状态提示,都能为你的项目增添一份专业和精致。

    很好用的Jquery消息提示插件

    而“很好用的Jquery消息提示插件”就是基于jQuery开发的一个工具,用于增强网页应用中的用户体验,通过提供各种样式和效果的通知或提示信息。 这个插件的核心功能在于为开发者提供了一种简便的方法来展示用户交互...

    jQuery tooltip 提示插件

    在jQuery的基础上开发的Tooltip插件,可以方便地集成到任何基于jQuery的项目中,为用户提供更直观的信息展示方式。 在描述中提到,这款jQuery Tooltip插件特别之处在于它支持通过AJAX动态加载提示内容。这意味着...

    jQuery图片拼图插件Image jigsaw.zip

    今天我们将深入探讨一个基于jQuery的轻量级插件——Image jigsaw,它使得在网页上实现图片拼图效果变得轻而易举。 Image jigsaw是一款只有3KB大小的插件,小巧却功能强大。它的主要特点是能够将任何指定的图片转化...

Global site tag (gtag.js) - Google Analytics