Кнопки переключения – это распространенный элемент пользовательского интерфейса, используемый для переключения между двумя состояниями, например для включения или отключения функции. В этой статье мы рассмотрим различные методы создания кнопок-переключателей с использованием HTML и JavaScript. Мы предоставим примеры кода для каждого метода, которые помогут вам реализовать кнопки переключения в ваших веб-проектах.

Метод 1: использование флажка
HTML:

<input type="checkbox" id="toggleButton">

JavaScript:

const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("change", function() {
  if (this.checked) {
    // Code to execute when the toggle button is checked
  } else {
    // Code to execute when the toggle button is unchecked
  }
});

Метод 2: использование кнопки и CSS
HTML:

<button id="toggleButton">Toggle</button>

CSS:

#toggleButton {
  background-color: #ccc;
  border: none;
  padding: 10px;
}
#toggleButton.active {
  background-color: #f00;
}

JavaScript:

const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
  this.classList.toggle("active");
  if (this.classList.contains("active")) {
    // Code to execute when the toggle button is active
  } else {
    // Code to execute when the toggle button is inactive
  }
});

Метод 3. Использование переключателей
HTML:

<input type="radio" name="toggleButton" id="toggleOn" checked>
<label for="toggleOn">On</label>
<input type="radio" name="toggleButton" id="toggleOff">
<label for="toggleOff">Off</label>

JavaScript:

const toggleOn = document.getElementById("toggleOn");
const toggleOff = document.getElementById("toggleOff");
toggleOn.addEventListener("change", function() {
  if (this.checked) {
    // Code to execute when the toggle button is on
  }
});
toggleOff.addEventListener("change", function() {
  if (this.checked) {
    // Code to execute when the toggle button is off
  }
});

Метод 4. Использование CSS и JavaScript с элементом Div
HTML:

<div id="toggleButton"></div>

CSS:

#toggleButton {
  width: 50px;
  height: 30px;
  background-color: #ccc;
}
#toggleButton.active {
  background-color: #f00;
  transform: translateX(20px);
  transition: transform 0.3s;
}

JavaScript:

const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", function() {
  this.classList.toggle("active");
  if (this.classList.contains("active")) {
    // Code to execute when the toggle button is active
  } else {
    // Code to execute when the toggle button is inactive
  }
});

Метод 5. Использование плагина Bootstrap Toggle
HTML:

<input type="checkbox" id="toggleButton" data-toggle="toggle">

JavaScript:

$(function() {
  $("#toggleButton").bootstrapToggle();
});

Метод 6. Использование библиотеки Switchery
HTML:

<input type="checkbox" id="toggleButton">

JavaScript:

var toggleButton = document.querySelector("#toggleButton");
var switchery = new Switchery(toggleButton);
toggleButton.addEventListener("change", function() {
  if (toggleButton.checked) {
    // Code to execute when the toggle button is checked
  } else {
    // Code to execute when the toggle button is unchecked
  }
});

Метод 7. Использование компонента переключения Material-UI
HTML:

<Switch id="toggleButton" />

JavaScript:

import React from "react";
import Switch from "@material-ui/core/Switch";
function ToggleButton() {
  const [checked, setChecked] = React.useState(false);
  const handleChange = (event) => {
    setChecked(event.target.checked);
    if (event.target.checked) {
      // Code to execute when the toggle button is checked
    } else {
      // Code to execute when the toggle button is unchecked
    }
  };
  return <Switch checked={checked} onChange={handleChange} />;
}

Метод 8: использование компонента кнопки переключения Vue.js
HTML:

<toggle-button v-model="isActive"></toggle-button>

JavaScript:

import ToggleButton from 'vue-js-toggle-button';
export default {
  components: {
    'toggle-button': ToggleButton
  },
  data() {
    return {
      isActive: false
    };
  },
  watch() {
      if (this.isActive) {
        // Code to execute when the toggle button is active
      } else {
        // Code to execute when the toggle button is inactive
      }
    }
};

Метод 9: использование компонента угловой кнопки-переключателя
HTML:

<toggle-button [(ngModel)]="isActive"></toggle-button>

JavaScript (TypeScript):

import { Component } from '@angular/core';
@Component({
  selector: 'app-toggle-button',
  template: `
    <label>
      <input type="checkbox" [(ngModel)]="isActive">
      <span class="slider round"></span>
    </label>
  `
})
export class ToggleButtonComponent {
  isActive = false;
  toggle() {
    if (this.isActive) {
      // Code to execute when the toggle button is active
    } else {
      // Code to execute when the toggle button is inactive
    }
  }
}

Метод 10: использование компонента переключения React Native
JavaScript (React Native):

import React, { useState } from 'react';
import { Switch } from 'react-native';
function ToggleButton() {
  const [isActive, setIsActive] = useState(false);
  const handleToggle = (value) => {
    setIsActive(value);
    if (value) {
      // Code to execute when the toggle button is active
    } else {
      // Code to execute when the toggle button is inactive
    }
  };
  return <Switch value={isActive} onValueChange={handleToggle} />;
}

В этой статье мы рассмотрели 10 различных методов создания кнопок-переключателей с использованием HTML и JavaScript. Каждый метод обеспечивает уникальный подход к реализации функций переключения в ваших веб-проектах. Предпочитаете ли вы использовать базовый HTML и JavaScript или популярные библиотеки и фреймворки, такие как Bootstrap, Switchery, Material-UI, Vue.js, Angular или React Native, теперь у вас есть множество вариантов на выбор. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и улучшите взаимодействие с пользователем с помощью кнопок переключения.