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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
js字符串操作方法实例分析
May 06 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
layui导出所有数据的例子
Sep 10 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
使用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
php中的三元运算符使用说明
2011/07/03 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP类的封装与继承详解
2015/09/29 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
公司活动方案范文
2014/03/06 职场文书
敬老院活动总结
2014/04/28 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2015年中个人总结范文
2015/03/10 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
总经理致辞
2015/07/29 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库