详细信息
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
将元素重新聚焦在启用上
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。