Bagaimana untuk menambah togol but menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menambah togol but menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-25 20:05:06

ke hadapan

668 orang telah melayarinya

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

Pustaka Bootstrap menyediakan pengguna dengan banyak ciri untuk menjadikan pengalaman pengekodan mereka lebih lancar. Satu ciri yang boleh dipilih oleh pengguna ialah suis togol. Salah satu ciri bergunanya ialah suis togol, yang membolehkan pengguna menambah komponen yang boleh bertukar antara dua keadaan seperti hidup dan mati.

Suis togol but

Cascading Style Sheets (CSS) Framework Bootstrap ialah kit alat yang menjadikan pembuatan tapak web lebih mudah dan lebih mematuhi piawaian. Ia boleh digunakan dengan JavaScript untuk mencipta antara muka pengguna yang responsif. Komponen suis togol Bootstrap mudah digunakan untuk memilih salah satu daripada dua alternatif yang tersedia. Selalunya digunakan sebagai suis hidup/mati.

Kaedah

Dalam artikel ini kita akan melihat dua cara berbeza untuk menambah togol bootstrap menggunakan JavaScript. Mereka adalah seperti berikut -

Gunakan kaedah bootstrapToogle()
Gunakan kaedah JavaScript toggleOn() dan toggleOff()

Kaedah 1: Gunakan kaedah BootstrapToogle()

Togol Elemen Bootstrap dilakukan menggunakan atribut togol data terbina dalam. Dalam kes ini, tugasan dilakukan menggunakan kaedah bootstrapToggle(). Anda boleh menggunakan kaedah bootstrapToggle() untuk menogol suis. Apabila pengguna mengklik pada kotak semak semasa suis berada dalam keadaan dilumpuhkan, ia bertukar kepada keadaan didayakan. Kaedah bootstrapToggle() menogol kotak semak kepada keadaan dilumpuhkan jika ia didayakan pada masa ini.

Contoh

Berikut ialah kod lengkap yang akan kami gunakan dalam contoh ini -

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

Salin selepas log masuk

Kaedah 2: Gunakan kaedah JavaScript toggleOn() dan toggleOff()

Anda juga boleh menukar suis menggunakan butang berasingan yang, apabila diklik, melaksanakan fungsi JavaScript. Kami boleh menggunakan kod JavaScript untuk menghidupkan atau mematikan suis berdasarkan keadaan sebelumnya. Di sini, kaedah toggleOff() mematikan suis, manakala kaedah toggleOn() menghidupkan suis.

Contoh

Berikut ialah kod lengkap yang akan kami gunakan dalam contoh ini -

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

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami mempelajari cara menambah togol bootstrap menggunakan JavaScript. Kami melihat dua cara untuk menyelesaikan tugas ini. Kami mula-mula melihat cara melakukan ini menggunakan kaedah bootstrapToggle() dan kemudian kami juga melihat cara menggunakan kaedah toggleOn() dan toggleOff() untuk mencapai kesan yang sama.

Atas ialah kandungan terperinci Bagaimana untuk menambah togol but menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!