Радіо кнопки у вигляді слайдера.

Відео: Como hacer Radio Buttons y Checkboxes personalizados con HTML y CSS

Відео: Навчися HTML # 22: checkbox і radio button

У цій статті я хочу розповісти вам про те, як зробити радіо кнопки у вигляді слайдера на JQuery.

Щоб це зробити, нам знадобиться одне доповнення для JQuery. Давайте зайдемо на сайт https://rubentd.com/radios-to-slider/ На цьому сайті ви можете відразу побачити, як працює даний слайдер. Щоб його встановити, перейдіть до низу сторінки і знайдіть файли з назвою jquery.radios-to-slider.min.js і radios-to-slider.min.css. Це, власне, jаvascript і css файли, необхідні для коректної роботи. Скачайте їх собі на комп`ютер. Оскільки це додаток до JQuery, то його нам теж потрібно встановити. Для цього перейдіть на сайт jquery.com і скачайте бібліотеку звідти або використовуйте CDN. Після того, як ви все завантажили, потрібно це підключити в нашому html файлі. Давайте його створимо і зробимо це.

Відео: Bootstrap form controls

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Radio Buttons to Slider 
 
 
rel="Stylesheet"href="Radios-to-slider.css"gt; 
 
 
 
id="Radios"gt; 
id="Option1"name="Options"type="Radio"gt; 
for="Option1"gt;1вибір 
 
id="Option2"name="Options"type="Radio"gt; 
for="Option2"gt;2вибір 
 
id="Option3"name="Options"type="Radio"checkedgt; 
for="Option3"gt;3вибір 
 
id="Option4"name="Options"type="Radio"gt; 
for="Option4"gt;4вибір 
 
id="Option5"name="Options"type="Radio"gt; 
for="Option5"gt;5вибір

У тезі head ми підключаємо потрібні нам скрипти і стилі. У тезі body досить просто створити div з яким-небудь класом або id, а всередині нього зробити звичайні radio кнопки з id. Щоб наш скрипт запрацював, в тезі script ми відбираємо наш div з id = radios в нашому випадком і застосовуємо до нього метод radiosToSlider (). Все, тепер наші слайдер-кнопки повинні вже працювати.

Відео: Популярні відео - Slider і HTML

Єдиний параметр, який може приймати конструктор, це animation. За замовчуванням він дорівнює true, але якщо анімація вам не потрібна, ви можете встановити його в false. Робиться це дуже просто

$("#radios").radiosToSlider({animation:false}) -

Ось такий ось простий скрипт, але він дозволяє зробити ефектні радіо кнопки. Сподіваюся, що комусь стане в нагоді. Успіхів!

Поділися в соціальних мережах:

Схожі