如何為Bootstrap spinner添加交互功能

小樊
82
2024-08-29 08:12:54
欄目: 編程語言

要為Bootstrap spinner添加交互功能，您可以使用JavaScript和jQuery

  1. 首先，確保已在項(xiàng)目中包含了Bootstrap和jQuery庫(kù)。在HTML文件的<head>部分添加以下代碼：
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入jQuery和Bootstrap JS --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  1. 在HTML文件中添加一個(gè)簡(jiǎn)單的spinner：
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
  1. 現(xiàn)在，我們將使用jQuery為spinner添加交互功能。在<script>標(biāo)簽中添加以下代碼：
$(document).ready(function () {
  // 獲取spinner元素
  var $spinner = $('.spinner-border');

  // 為spinner添加點(diǎn)擊事件
  $spinner.click(function () {
    // 切換spinner的顯示和隱藏狀態(tài)
    if ($spinner.hasClass('d-none')) {
      $spinner.removeClass('d-none');
    } else {
      $spinner.addClass('d-none');
    }
  });
});

這段代碼會(huì)在頁(yè)面加載完成后，為spinner添加一個(gè)點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊spinner時(shí)，它會(huì)切換spinner的顯示和隱藏狀態(tài)。

您可以根據(jù)需要修改這個(gè)示例，實(shí)現(xiàn)更多的交互功能。例如，您可以在點(diǎn)擊按鈕時(shí)顯示spinner，并在AJAX請(qǐng)求完成后隱藏spinner。

0 踩