bootstrap改变按钮加载状态
作者:bea
bootstrap里面有个激活按钮的时候,按钮变成不可用的; 按照官网里面的方法介绍是在button按钮加个 data-loading-text="Loading..." 属性,然后js总体代码是这样: 代码如下: <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading st
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>
稍作就改就可以实现我们的要求了,不知道官方这块是不是没有测试就放上来了,这里把解决方案推荐给小伙伴。
有用 | 无用
按照官网里面的方法介绍是在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>
稍作就改就可以实现我们的要求了,不知道官方这块是不是没有测试就放上来了,这里把解决方案推荐给小伙伴。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 使用jQuery实现验证上传图片的格式与大小
- 使用正则表达式的格式化与高亮显示json字符串
- jquery中获取元素里某一特定子元素的代码
- JS逆序遍历实现代码
- javascript框架设计读书笔记之数组的扩展与修复
- javascript框架设计读书笔记之字符串的扩展和修复
- javascript框架设计读书笔记之模块加载系统
- javascript框架设计读书笔记之种子模块
- 推荐一个封装好的getElementsByClassName方法
- CSS3,HTML5和jQuery搜索框集锦
- JavaScript和CSS交互的方法汇总
- HTML,CSS,JavaScript速查表推荐
- javascript函数声明和函数表达式区别分析
- javascript常用方法汇总
- js时间日期格式化封装函数
- JavaScript基础语法、dom操作树及document对象
- JavaScript基础知识学习笔记
- Js 正则表达式知识汇总
- 21个JavaScript事件(Events)属性汇总