一个轻量级的网页遮罩层jQuery插件

最新推荐文章于 2025-10-30 11:22:15 发布

原创

最新推荐文章于 2025-10-30 11:22:15 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #jquery #border #function #class

本文介绍了如何利用一个简洁的jQuery插件实现网页遮罩层功能，当用户点击按钮后，弹出遮罩层显示加载提示。此插件适合对体积有要求的项目，文章将解析其源码并展示配置方法。

使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。

现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。

其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没有写。现在就来分析一下这个组件的源码和使用

/**
 * @部分参数说明
 */
(function($){
    $.fn.extend({
        //主函数
        toggleLoading: function(options){
			// 找到遮罩层
        	var crust = this.children(".x-loading-wanghe");
			// 当前操作的元素
			var thisjQuery = this;
			// 实现toogle(切换遮罩层出现与消失)效果的判断方法
        	if(crust.length>0){
        		if(crust.is(":visible")){
        			crust.fadeOut(500);
        		}else{
	        		crust.fadeIn(500);
        		}
        		return this;
        	}
            // 扩展参数
            var op = $.extend({
                z: 9999,
                msg:'数据加载中...',
                iconUrl:'images/loading.gi

最低0.47元/天解锁文章