Maison > Article > interface Web > Comment ajouter une bascule de démarrage en utilisant JavaScript ?

Comment ajouter une bascule de démarrage en utilisant JavaScript ?

WBOYavant: 2023-08-25 20:05:06662parcourir

如何使用 JavaScript 添加引导切换开关？

Bootstrap 库为用户提供了许多功能，使他们的编码体验更加流畅。用户可以选择的此类功能之一是切换开关。切换开关是其有用的功能之一，它使用户能够添加可以在打开和关闭等两种状态之间切换的组件。

引导切换开关

级联样式表 (CSS) 框架 Bootstrap 是一个工具包，它使创建网站变得更简单且更符合标准。它可以与 JavaScript 一起使用来创建响应式用户界面。简单的 Bootstrap 切换开关组件用于选择两个可用替代方案之一。经常用作开/关开关。

方法

我们将在本文中了解两种使用 JavaScript 添加引导切换开关的不同方法。它们如下 -

使用 bootstrapToogle() 方法
使用JavaScript方法toggleOn()和toggleOff()

方法一：使用BootstrapToogle()方法

切换 Bootstrap 元素是使用内置的 data-toggle 属性完成的。在这种情况下，该任务是使用 bootstrapToggle() 方法执行的。可以使用 bootstrapToggle() 方法来切换开关。当用户在开关处于禁用状态时点击复选框时，它会切换到启用状态。 bootstrapToggle() 方法将复选框切换为禁用状态（如果当前已启用）。

示例

以下是我们将在本示例中使用的完整代码 -

<!DOCTYPE html>
<html>
<head>
   <title>How to add bootstrap toggle-switch using JavaScript?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
   <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
   <h4>How to add bootstrap toggle-switch using JavaScript?</h4>
   <div class="container mt-5">
   <input type="checkbox" id="toggle-input">
   </div>
   <script>
      $(function () {
         $('#toggle-input').bootstrapToggle({
            on: 'ON',
            off: 'OFF'
         });
      })
   </script>
</body>
</html>

方法2：使用JavaScript方法toggleOn()和toggleOff()

还可以使用单独的按钮来翻转开关，单击这些按钮时，会执行 JavaScript 功能。根据开关之前的状态，我们可以使用 JavaScript 代码来打开或关闭开关。这里，toggleOff()方法关闭开关，而toggleOn()方法打开开关。

示例

以下是我们将在本示例中使用的完整代码 -

<!DOCTYPE html>
<html>
<head>
   <title>How to add bootstrap toggle-switch using JavaScript?</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
   <script src="https://code.jquery.com/jquery.min.js"></script>
   <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
   <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
   <h4>How to add bootstrap toggle-switch using JavaScript?</h4>
   <div class="container mt-5">
      <input id="toggle-trigger" type="checkbox" 
      data-toggle="toggle">
      <button class="btn btn-success" onclick="toggleOn()">
         On Button
      </button>
      <button class="btn btn-danger" onclick="toggleOff()">
         Off Button
      </button>
   </div>
   <script>
      function toggleOn() {
         $('#toggle-trigger').bootstrapToggle('on')
      }
      function toggleOff() {
         $('#toggle-trigger').bootstrapToggle('off') 
      }
   </script>
</body>
</html>

结论

在本文中，我们了解了如何使用 JavaScript 添加引导切换开关。我们研究了两种完成此任务的方法。我们首先看到了如何使用 bootstrapToggle() 方法来做到这一点，后来我们还看到了如何使用toggleOn() 和toggleOff() 方法来获得相同的效果。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Programme JavaScript pour trouver la plus petite rotation de chaîne lexicographiquementArticle suivant：Programme JavaScript pour trouver la plus petite rotation de chaîne lexicographiquement

Articles Liés

Voir plus