如何为Bootstrap spinner添加交互功能

avatar
作者
筋斗云
阅读量:0

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

  1. 首先,确保已在项目中包含了Bootstrap和jQuery库。在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文件中添加一个简单的spinner:
<div class="text-center">   <div class="spinner-border" role="status">     <span class="visually-hidden">Loading...</span>   </div> </div> 
  1. 现在,我们将使用jQuery为spinner添加交互功能。在<script>标签中添加以下代码:
$(document).ready(function () {   // 获取spinner元素   var $spinner = $('.spinner-border');    // 为spinner添加点击事件   $spinner.click(function () {     // 切换spinner的显示和隐藏状态     if ($spinner.hasClass('d-none')) {       $spinner.removeClass('d-none');     } else {       $spinner.addClass('d-none');     }   }); }); 

这段代码会在页面加载完成后,为spinner添加一个点击事件。当用户点击spinner时,它会切换spinner的显示和隐藏状态。

您可以根据需要修改这个示例,实现更多的交互功能。例如,您可以在点击按钮时显示spinner,并在AJAX请求完成后隐藏spinner。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!