|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
按鈕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>
代碼解釋
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);
});有關進程圖標
本實例用到的進程圖標，是來自Font Awesome圖標庫文件。
Font Awesome圖標的unicode代碼請看：Font Awesome content代碼匯總，共246個
注意！你的Web服務器可能要安裝配置Font Awesome圖標字體，請看以下幾篇文章。
Linux Nginx安裝配置Font Awesome圖標字體
您可能對以下文章也感興趣
標簽: 按鈕Loading效果 button
x
- 站長推薦
