suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie füge ich mit JavaScript einen Boot-Schalter hinzu?

Wie füge ich mit JavaScript einen Boot-Schalter hinzu?

WBOY
WBOYnach vorne
2023-08-25 20:05:06669Durchsuche

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

Die Bootstrap-Bibliothek bietet Benutzern viele Funktionen, um ihr Programmiererlebnis reibungsloser zu gestalten. Eine solche Funktion, die Benutzer auswählen können, ist ein Kippschalter. Eine seiner nützlichen Funktionen ist der Kippschalter, mit dem Benutzer Komponenten hinzufügen können, die zwischen zwei Zuständen wechseln können, z. B. Ein und Aus.

Boot-Kippschalter

Cascading Style Sheets (CSS) Framework Bootstrap ist ein Toolkit, das die Erstellung von Websites einfacher und standardkonformer macht. Es kann mit JavaScript verwendet werden, um reaktionsfähige Benutzeroberflächen zu erstellen. Eine einfache Bootstrap-Kippschalterkomponente wird verwendet, um eine der beiden verfügbaren Alternativen auszuwählen. Wird oft als Ein-/Ausschalter verwendet.

Methode

In diesem Artikel betrachten wir zwei verschiedene Möglichkeiten, einen Bootstrap-Toggle mithilfe von JavaScript hinzuzufügen. Sie sind wie folgt -

  • Verwenden Sie die BootstrapToogle()-Methode

  • Verwenden Sie die JavaScript-Methoden toggleOn() und toggleOff()

Methode 1: Verwenden Sie die BootstrapToogle()-Methode

Das Umschalten von Bootstrap-Elementen erfolgt mithilfe des integrierten Datenumschaltattributs. In diesem Fall wird die Aufgabe mit der Methode bootstrapToggle() ausgeführt. Sie können die Methode bootstrapToggle() verwenden, um den Schalter umzuschalten. Wenn der Benutzer auf das Kontrollkästchen klickt, während sich der Schalter im deaktivierten Zustand befindet, wechselt er in den aktivierten Zustand. Die Methode bootstrapToggle() schaltet ein Kontrollkästchen in den deaktivierten Zustand, wenn es derzeit aktiviert ist.

Beispiel

Hier ist der vollständige Code, den wir in diesem Beispiel verwenden werden -

<!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>

Methode 2: Verwenden Sie die JavaScript-Methoden toggleOn() und toggleOff()

Es ist auch möglich, den Schalter über separate Schaltflächen umzulegen, die beim Klicken JavaScript-Funktionen ausführen. Wir können JavaScript-Code verwenden, um den Schalter basierend auf seinem vorherigen Zustand ein- oder auszuschalten. Hier schaltet die Methode toggleOff() den Schalter aus, während die Methode toggleOn() den Schalter einschaltet.

Beispiel

Hier ist der vollständige Code, den wir in diesem Beispiel verwenden werden -

<!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>

Fazit

In diesem Artikel haben wir gelernt, wie man mit JavaScript einen Bootstrap-Schalter hinzufügt. Wir haben uns zwei Möglichkeiten angesehen, diese Aufgabe zu erfüllen. Zuerst haben wir gesehen, wie man das mit der Methode „bootstrapToggle()“ macht, und später haben wir auch gesehen, wie man mit den Methoden „toggleOn()“ und „toggleOff()“ den gleichen Effekt erzielt.

Das obige ist der detaillierte Inhalt vonWie füge ich mit JavaScript einen Boot-Schalter hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：JavaScript-Programm zum Ermitteln der lexikografisch kleinsten StringrotationNächster Artikel：JavaScript-Programm zum Ermitteln der lexikografisch kleinsten Stringrotation

In Verbindung stehende Artikel

Mehr sehen