Switchery
Каталог: Плагины Bootstrap
Категория: Дизайн
Для Bootstrap: 3, 4
Для CMS: HTML, Drupal, Joomla, uCoz, WordPress
Язык: Английский
Вес файла: 31.9Kb
Уникальный ID: 1183
Посмотрели: 429 раз
Скачать бесплатно
Скачали бесплатно: 15 раз
Прокомментировали: 0 раз
Рейтинг: 5.0 / 5 - 1 голосов
Тип лицензии: CC BY 4.0
Авторство: http://abpetkov.github.io/switchery/
Информация: Пользователям
Информация: Правообладателям
Поделился:
Добавлено: 2016-07-23 в 19:35
Метка: 1469291713
Похожие
Архив
Архив материалов которые Вы уже смотрели пока пуст
// Подключаемые файлы
<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2016/switchery/switchery.min.css" />
<script src="http://bootstraptema.ru/plugins/2016/switchery/switchery.min.js"></script>
// Скрипт с готовыми настройками
 <script>

 // Default
 // if-else statement used only for fixing <IE9 issues
 if (Array.prototype.forEach) {
 var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

 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>
Всего комментариев: 0
avatar

Посоветуйте этот материал другу отправив ему письмо на E - mail

Написать администрации по поводу этого материала