加载时添加/删除 CSS 类 - 类加载

加载时添加/删除 CSS 类 - 类加载

版本:

浏览量:1170

最后更新:2021-09-11

应用标签:Jquery插件gitMAC 软件

推荐指数:

详细信息

class-loading 是一个超小型的 jQuery 插件,它只是在加载某些内容时向元素添加自定义 CSS 类和禁用属性。

当用户异步加载某些东西时,非常适合在容器上显示自定义加载指示器。

用 TypeScript 编写并支持回调和承诺。

如何使用它:

1.安装和下载。

# NPM
$ npm install class-loading --save

2. 将类加载导入为 ES 模块。

import initLoading from 'class-loading';
import $ from 'jquery';
 
initLoading($);

3. 或者直接在jQuery之后加载类加载插件的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/loading.min.js"></script>

4. 向元素添加 CSS 类。在此示例中,我们将在加载内容时创建一个加载到 #example 容器内的 CSS。以下是用纯 HTML/CSS 编写80 多个加载指示器的集合

<div id="example">
  ...
</div>
$('#example').loading('loading loader');

5. 结果 HTML 标记应如下所示:

<div id="example" disabled="disabled" class="loading loader">
  ...
</div>

6. 从元素中删除 CSS 类。

$('#example').loading(false);

7. 添加 CSS 类并获取回调。

const done = $('selector').loading('loading', true);
      ...
done();

8. 添加 CSS 类并在 promise 解决或拒绝时删除。

const done = $('selector').loading('loading', promise);
setTimeout(done, 5e3);

变更日志:

v1.4.0 (01/20/2021)

  • 如果在启用时超出视口,请避免重新聚焦禁用的元素

2020-10-24

  • 将元素重新聚焦在启用上

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。