久久综合视频网,丰满的少妇人妻无码区

技術頻道 - js技術

按鈕Loading效果（按鈕上顯示進程狀態(tài)）

作者:admin 時間:2021-8-13 11:10:2 瀏覽:

按鈕Loading效果（按鈕上顯示進程狀態(tài)），在很多場合可能用到，例如提交訂單后的處理過程，這時處于等待狀態(tài)，在按鈕上顯示進程狀態(tài)的話，給用戶的使用體驗是大大增強的。

按鈕Loading效果

實例介紹

本實例使用了bootstrap的JS插件來實現(xiàn)，由于功能已經(jīng)被封裝了，所以編寫JS代碼只需調用相應的方法，非常方便，代碼十分簡潔。

按鈕的樣式同樣使用bootstrap的CSS樣式設計，而按鈕的狀態(tài)圖標用到了font-awesome字體圖標庫。

由于實例代碼是使用jQuery程序編寫，所以本實例還需要引用jQuery庫文件。

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Button Loading</title>
  <link rel='stylesheet' href='bootstrap.min.css'>
  <link rel='stylesheet' href='font-awesome/css/font-awesome.min.css'>
</head>

<body>
<div style="margin:3em;">
  <button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
  <br><br>
  <button type="button" class="btn btn-primary btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>
   
<script src='jquery-2-1-3.min.js'></script>
<script src='bootstrap.min.js'></script>
<script id="rendered-js" >
$('.btn').on('click', function () {
  var $this = $(this);
  $this.button('loading');
  setTimeout(function () {
    $this.button('reset');
  }, 3000);
});
</script>

</body>

</html>

execcode getcode

代碼解釋

HTML代碼按鈕設計使用了<button>標簽，它使用了多個class來實現(xiàn)。

按鈕里的<i>標簽，是用來顯示進程圖標的地方，進程圖標顯示或消失，完全由JS代碼控制。

JS代碼里3000是按鈕進程圖標顯示的時間（3s），在實際應用中，這個時間不應該固定不變，而應該是真實的事件處理時間。

$('.btn').on('click', function () {
  var $this = $(this);
  $this.button('loading');
  setTimeout(function () {
    $this.button('reset');
  }, 3000);
});