jquery遮罩层插件mloading资源-CSDN下载资源-CSDN下载

共4个文件

js：2个

html：1个

css：1个

需积分: 44 200 浏览量 2018-04-23 11:03:38 上传评论收藏 31KB RAR 举报

**jQuery 遮罩层插件 mloading** 在网页开发中，为了提供更好的用户体验，我们经常需要在数据加载或处理过程中显示一个遮罩层，让用户知道后台正在执行操作。jQuery 插件 `mloading` 正是为此目的设计的。这个插件允许开发者在页面上轻松创建全屏遮罩层，即使页面有滚动条，也能确保整个页面被完全覆盖，避免用户在等待过程中误操作。 ### 插件特点与优势 1. **兼容性广泛**：`mloading` 支持 jQuery 的较低版本，如 1.4.4。这意味着它可以在一些较旧的项目中使用，这些项目可能尚未升级到最新的 jQuery 版本。 2. **全屏遮罩**：该插件的亮点之一是它可以实现全屏遮罩效果，无论页面内容如何滚动，遮罩层始终保持覆盖整个屏幕。这有助于确保用户的注意力集中在当前的操作上。 3. **简单易用**：`mloading` 插件的使用非常简单。只需几行代码，就能快速在页面上添加和移除遮罩层，极大地提高了开发效率。 ### 使用方法 #### 引入资源在你的 HTML 文件中，首先需要引入 jQuery 库和 `mloading` 插件的 JavaScript 文件。例如： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery 遮罩层示例</title> <script src="https://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="js/jquery.mloading.js"></script> </head> <body>  </body> </html> ``` #### 初始化插件接下来，你需要初始化 `mloading` 插件。这通常在 DOM 加载完成后进行，可以使用 `$(document).ready()` 函数： ```javascript $(document).ready(function() { // 初始化 mloading 插件 $('body').mloading({ // 可选参数，根据需求配置 text: '数据加载中...', // 遮罩层上显示的文本 background: '#000', // 遮罩层背景颜色 color: '#fff', // 文本颜色 fontSize: '16px' // 文本字体大小 }); }); ``` #### 显示和隐藏遮罩层当需要显示遮罩层时，调用 `show` 方法： ```javascript $.mloading('show'); ``` 当操作完成，需要隐藏遮罩层时，调用 `hide` 方法： ```javascript $.mloading('hide'); ``` ### 示例代码在你提供的 `loading遮罩插件jquery.mloading.html` 文件中，应该包含了一个使用 `mloading` 插件的完整示例。这个文件可能会展示如何在页面加载、点击按钮等事件触发时显示和隐藏遮罩层。 ### 应用场景 `mloading` 插件适用于各种需要加载提示的场景，如： 1. 数据异步加载时，防止用户在数据未准备好前进行其他操作。 2. 用户提交表单后，显示遮罩层，告知用户系统正在处理请求。 3. 载入大量图片或大文件时，避免用户误操作。 `mloading` 是一个实用的 jQuery 插件，通过简单的 API 提供了高效、灵活的全屏遮罩层功能，适用于各种需要显示加载状态的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

jquery遮罩层插件mloading.rar （4个子文件）

jquery.mloading.js 9KB

jquery-1.4.4.min.js 77KB

jquery.mloading.css 2KB

loading遮罩插件jquery.mloading.html 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mloading demo</title> <link rel="stylesheet" href="js/jquery.mloading.css"> </head> <body> <button type="button" id="btnTest">遮罩页面</button><br/> <script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery.mloading.js"></script> <script> $(function(){ $("#btnTest").click(function(){ $("body").mLoading(); }); $("body").mLoading("hide"); }); </script> <textarea style="width:800px;height:10000px;"> 使用方法将jquery.mloading.js和jquery.mloading.css引入到页面，调用： $(element).mLoading({ text:"",//加载文字，默认值：加载中... icon:"",//加载图标，默认值：一个小型的base64的gif图片 html:false,//设置加载内容是否是html格式，默认值是false content:"",//忽略icon和text的值，直接在加载框中显示此值 mask:true//是否显示遮罩效果，默认显示 }); 方法： $(element).mLoading("show");//显示loading组件 $(element).mLoading("hide");//隐藏loading组件这个element可以写成body $("body").mLoading(); 不加参数，就是默认的打开这个loading。 </textarea> </body> </html>

评论收藏

内容反馈