bootstrap改变按钮加载状态


Posted in Javascript onDecember 01, 2014

bootstrap里面有个激活按钮的时候,按钮变成不可用的;

按照官网里面的方法介绍是在button按钮加个 data-loading-text="Loading..." 属性,然后js总体代码是这样:

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">

  Loading state

</button>
<script>

  $('#myButton').on('click', function () {

    var $btn = $(this).button('loading')

    // business logic...

    $btn.button('reset')

  })

</script>

其中autocomplete="off"属性是针对FF浏览器在页面加载之后,禁用状态不会自动解除用的。
我在直接用上面代码的时候,发现loading状态是没有的。
然后我自己改了一下,写成这样,就OK了

<script>

//用于微笑话登陆按钮以及审稿按钮改变按钮加载状态

    function loag() {

      var btn = $("#btn_login");

      btn.button('loading');

      setTimeout(function () { btn.button('reset'); },2000);

    }

</script>

 <button type="button" class="btn btn-default" data-loading-text="Loading..." autocomplete="off" onclick="loag()" id="btn_login">登陆</button>

稍作就改就可以实现我们的要求了,不知道官方这块是不是没有测试就放上来了,这里把解决方案推荐给小伙伴。

Javascript 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
javascript如何定义对象数组
Jun 07 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
JS触摸与手势事件详解
May 09 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 #Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 #Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 #Javascript
Javascript学习指南
Dec 01 #Javascript
Javascript模块化编程详解
Dec 01 #Javascript
浅谈Javascript中深复制
Dec 01 #Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 #Javascript
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
django 模版关闭转义方式
2020/05/14 Python
零基础小白多久能学会python
2020/06/22 Python
浅析Python 序列化与反序列化
2020/08/05 Python
django有哪些好处和优点
2020/09/01 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
python中_del_还原数据的方法
2020/12/09 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
励志演讲稿3分钟
2014/08/21 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js