按钮交互loading ---- 转圈圈 加载

按钮loading状态自定义选项(功能)

可以在元素上添加 data-am-loading 来设置选项:

  • spinner 加载动画图标,适用于支持 CSS3 动画、非 input 元素,写图标名称即可;
  • loadingText 加载时显示的文字, 默认为 loading
  • resetText 重置以后的显示的文字,默认为原来的内容
    <button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">按钮 - button 元素</button>
    
    <input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按钮 - input 元素" data-am-loading="{loadingText: '努力加载中...'}" />
    
    $('.btn-loading-example').click(function () {
      var $btn = $(this)
      $btn.button('loading');
        setTimeout(function(){
          $btn.button('reset');
      }, 5000);
    });

    拿来用即可,效果即现。

posted @ 2018-12-04 15:21  一粒小米-博客  阅读(6730)  评论(0编辑  收藏  举报