用 bootstrap 实现按钮加载状态 作者：七棵菜 日期：2022-11-30 栏目：计算机分类：1 人气：443 - 引入`jquery`和`bootstrap`脚本 - 按钮增加`data-loading-text`和`autocomplete`属性 1. `data-loading-text`属性为加载时显示的文本 2. `autocomplete`属性是针对FF浏览器在页面加载之后，禁用状态不会自动解除用的。 - 调用组件的`button`方法 ``` <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button" autocomplete="off"> 加载状态 </button> <script> $(function() { $(".btn").click(function(){ /* 改变内部`html`，需要延迟加载，因为loading会改变内部html */ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); // $(this).find('i').html(1); }); }); }); </script> ``` 标签： loading bootstrap 前端 上一篇：如何使用mvn命令导入依赖 下一篇：editor.md 列表和区块引用样式显示异常 随便看看 2024-02-19 PHP7 运算符“??” 和“?:”的区别 2022-11-30 Linux 后台运行命令 2022-11-25 关于我们 2022-11-30 centos一键系统安装lnmp集成环境 2022-11-30 linux 生成 ssh 公钥 留言
