Home > Web Front-end > HTML Tutorial > bootstrap button loading state changes_html/css_WEB-ITnose

bootstrap button loading state changes_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:53:03
Original
1342 people have browsed it

When there is an activation button in bootstrap, the button becomes unavailable;

According to the method on the official website, add a data-loading-text="Loading.. ." attribute, and then the overall js code is like this:

<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>
Copy after login

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

<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>
Copy after login

This article comes from the Blog Garden - Three Volume Heavenly Book, I hope to collect it or Friends who reposted please indicate the source, thank you

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template