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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
原生JS实现幻灯片
Feb 22 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python 项目目录结构设置
2020/02/14 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
新员工入职感言
2014/02/01 职场文书
一年级班主任感言
2014/03/08 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
庆元旦演讲稿
2014/09/15 职场文书
项目战略合作意向书
2015/05/08 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
老人与海读书笔记
2015/06/26 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书