在前端开发中，很多时候我们需要在页面中显示某些操作的等待状态，以给用户更好的交互体验。而 jquery-wait 这个 npm 包则是一个方便易用的 jQuery 插件，可以帮助我们轻松地在页面中创建各式各样的等待状态。在本文中，我们将详细介绍该插件的使用方法。
安装
在使用 jquery-wait 之前，需要先在你的项目中安装该依赖包，可以通过 npm 安装：
npm install jquery-wait --save
之后，需要在项目中引入 jQuery 和 jquery-wait 依赖：
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="path/to/jquery-wait.css" /> <script src="path/to/jquery-wait.js"></script>
基本用法
使用 jquery-wait 创建等待状态的基本步骤如下：
- 在 HTML 页面中放置一个容器元素，作为等待状态的外层包裹元素；
- 在 JS 代码中调用
waitMe({})方法，创建等待状态。
以下是一个简单的示例：
<div id="wait-wrapper"></div>
$('#wait-wrapper').waitMe({
effect: 'pulse',
text: '请稍等...',
bg: 'rgba(255, 255, 255, 0.7)',
});通过这段代码，我们在 #wait-wrapper 元素内创建了一个“脉冲”特效的等待状态，正文中显示了“请稍等...”字样，并设置了一层半透明的白色背景。效果如下图所示：
配置项
jquery-wait 支持多种配置项，可以通过传入一个包含配置信息的对象到 waitMe() 方法中进行设置。
效果
jquery-wait 内置了多种特效样式，包括旋转、脉冲、跳动、平移等。可以通过 effect 属性来设置特效样式，如：
$('#target-el').waitMe({
effect: 'rotation',
text: '加载中...',
});效果如下图所示：
支持的特效样式包括：
- none：无特效
- bounce：弹跳效果
- rotateplane：旋转平面
- stretch：拉伸
- orbit：轨道效果
- roundBounce：圆环弹跳
- win8：Windows 8 样式
- win8_linear：Windows 8 线性样式
- ios：iOS 样式
- facebook：Facebook 样式
- rotation：旋转效果
- timer：定时器样式
边框
可以使用 border 属性来设置等待状态的边框样式。例如：
-- -------------------- ---- ------- ------------------------ ------- ------ ----- --------- --- ------------------------ ------ ------- ------------ ------------------------ ------------ ------ ------------ --------- ---
效果如下图所示：
背景
可以使用 bg 属性来设置等待状态的背景色，如：
$('#target-el').waitMe({
effect: 'orbit',
text: '加载中...',
bg: 'rgba(255, 255, 255, 0.7)',
});效果如下图所示：
字体
可以使用 color 属性来设置等待状态文字的颜色：
$('#target-el').waitMe({
effect: 'roundBounce',
text: '请稍等...',
color: '#2196F3',
});效果如下图所示：
文字
可以使用 text 属性来设置等待状态文字的内容：
$('#target-el').waitMe({
effect: 'facebook',
text: '正在提交数据，请稍等...',
color: '#fff',
bg: 'rgba(255, 79, 70, 0.7)',
});效果如下图所示：
遮罩
可以使用 waitTime 和 textPos 属性来设置遮罩层，如：
$('#target-el').waitMe({
effect: 'bounce',
text: '请稍等...',
color: '#e74c3c',
bg: 'rgba(255,255,255,0.7)',
waitTime: -1,
textPos: 'vertical',
});效果如下图所示：
成功与失败状态
jquery-wait 还可以用来显示成功和失败状态，这需要在调用 waitMe() 方法时传入一个 isRemove 参数，如：
-- -------------------- ---- -------
------------------------
------- -------
----- ------------
------ -------
--- ---------- --- --- ------
---------- -------- --------- ----- -
---------------------------------------------------------
--
-------- -------- --------- ----- -
---------------------------------------------------------
--
---
-- ------
-------------------------------
------------------------
--------- -----
---备注：以上内容参考官方文档。
以上就是 jquery-wait 的一些基本用法和配置项，通过这些方法，可以很方便地创建各种等待状态，让网页更具交互性。希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005562381e8991b448d3105