按鈕交互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);
    });

    拿來用即可,效果即現。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM