Switchery / Дизайн / Плагины Bootstrap

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 31.9 Kb

Уникальный ID: 1183

Посмотрели: 2185 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 38 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: http://abpetkov.github.io/switchery/

Информация: Пользователям

Информация: Правообладателям

Теги: Bootstrap, input, CheckBox, Plugin, Switchery

Поделился: BootstrapТема

Добавлено: 2016-07-23 в 19:35

Метка: 1588923373

⇄ ⇅

elems.forEach(function(html) {
 var switchery = new Switchery(html);
 });
 } else {
 var elems = document.querySelectorAll('.js-switch');

for (var i = 0; i < elems.length; i++) {
 var switchery = new Switchery(elems[i]);
 }
 }

// Disabled switch
 var disabled = document.querySelector('.js-switch-disabled');
 var switchery = new Switchery(disabled, { disabled: true });

var disabledOpacity = document.querySelector('.js-switch-disabled-opacity');
 var switchery = new Switchery(disabledOpacity, { disabled: true, disabledOpacity: 0.75 });

// Colored switches
 var blue = document.querySelector('.js-switch-blue');
 var switchery = new Switchery(blue, { color: '#7c8bc7', jackColor: '#9decff' });

var pink = document.querySelector('.js-switch-pink');
 var switchery = new Switchery(pink, { color: '#faab43', secondaryColor: '#fC73d0', jackColor: '#fcf45e', jackSecondaryColor: '#c8ff77' });

// Switch sizes
 var small = document.querySelector('.js-switch-small');
 var switchery = new Switchery(small, { size: 'small' });

var large = document.querySelector('.js-switch-large');
 var switchery = new Switchery(large, { size: 'large' });

// Dynamic enable/disable
 var dynamicDisable = document.querySelector('.js-dynamic-state');
 var dynamicStateCheckbox = new Switchery(dynamicDisable);

document.querySelector('.js-dynamic-disable').addEventListener('click', function() {
 dynamicStateCheckbox.disable();
 });

document.querySelector('.js-dynamic-enable').addEventListener('click', function() {
 dynamicStateCheckbox.enable();
 });

// Getting checkbox state
 // On click
 var clickCheckbox = document.querySelector('.js-check-click')
 , clickButton = document.querySelector('.js-check-click-button');

if (window.addEventListener) {
 clickButton.addEventListener('click', function() {
 alert(clickCheckbox.checked);
 });
 } else {
 clickButton.attachEvent('onclick', function() {
 alert(clickCheckbox.checked);
 });
 }

// On change
 var changeCheckbox = document.querySelector('.js-check-change')
 , changeField = document.querySelector('.js-check-change-field');

changeCheckbox.onchange = function() {
 changeField.innerHTML = changeCheckbox.checked;
 };

// CSS3 Pie for <IE9
 if (window.PIE) {
 var wrapper = document.querySelectorAll('.switchery')
 , handle = document.querySelectorAll('.switchery > small');

if (wrapper.length == handle.length) {
 for (var i = 0; i < wrapper.length; i++) {
 PIE.attach(wrapper[i]);
 PIE.attach(handle[i]);
 }
 }
 }
 </script>

BootstrapTema

Switchery

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0