下载·安博体育(中国)官方网站;,亚洲日本一区二区三区高清在线

技術(shù)頻道 - js技術(shù)

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

作者:admin 時(shí)間:2021-8-13 11:10:2 瀏覽:

按鈕Loading效果（按鈕上顯示進(jìn)程狀態(tài)），在很多場(chǎng)合可能用到，例如提交訂單后的處理過(guò)程，這時(shí)處于等待狀態(tài)，在按鈕上顯示進(jìn)程狀態(tài)的話(huà)，給用戶(hù)的使用體驗(yàn)是大大增強(qiáng)的。

按鈕Loading效果

實(shí)例介紹

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

按鈕的樣式同樣使用bootstrap的CSS樣式設(shè)計(jì)，而按鈕的狀態(tài)圖標(biāo)用到了font-awesome字體圖標(biāo)庫(kù)。

由于實(shí)例代碼是使用jQuery程序編寫(xiě)，所以本實(shí)例還需要引用jQuery庫(kù)文件。

完整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代碼按鈕設(shè)計(jì)使用了<button>標(biāo)簽，它使用了多個(gè)class來(lái)實(shí)現(xiàn)。

按鈕里的<i>標(biāo)簽，是用來(lái)顯示進(jìn)程圖標(biāo)的地方，進(jìn)程圖標(biāo)顯示或消失，完全由JS代碼控制。

JS代碼里3000是按鈕進(jìn)程圖標(biāo)顯示的時(shí)間（3s），在實(shí)際應(yīng)用中，這個(gè)時(shí)間不應(yīng)該固定不變，而應(yīng)該是真實(shí)的事件處理時(shí)間。

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