1. 程式人生 > >按鈕互動loading ---- 轉圈圈 載入

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

    拿來用即可,效果即現。