Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

LC Switch - Плагин JavaScript для скользящих переключателей (checkbox и radio)

Дата добавления: 06.02.2021 - 21:08
Добавил: Buger
Количество просмотров: 37
Количество комментариев: 0
Размер файла: 7.6 Kb
Рейтинг материала: 0.0 / 0
LC Switch - Плагин JavaScript для скользящих переключателей (checkbox и radio)
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
LC Switch - это крошечный плагин jQuery и Vanilla JS, который преобразует checkbox и radio по умолчанию в красивые переключатели или кнопки переключения с плавными эффектами скольжения, основанными на переходах CSS3.

Демонстрация в архиве (файл: demo.html)

Как использовать (jQuery):


1. Загрузите и подключите библиотеку jQuery и файлы плагина jQuery LC Switch в свой проект.
Код
<script src="jquery.min.js"></script>
<script src="lc_switch.js"></script>
<link rel="stylesheet" href="lc_switch.css" />

2. Вызовите плагин для checkbox и radio. Об остальном позаботится плагин.
Код
$('input').lc_switch();

3. Функции.
Код
// toggle on
$('input').lcs_on();

// toggle off
$('input').lcs_off();

// destroy
$('input').lcs_destroy();

4. События.
Код
// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});

// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});

// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});


Как использовать (Vanilla JS):


1. Загрузите LC Switch V2 и подключите lc_switch.js в документ.
Код
<script src="lc_switch.js"></script>

2. Прикрепите плагин к checkbox и radio кнопкам.
Код
lc_switch('input[type=checkbox], input[type=radio]');

3. Возможные варианты плагина для настройки переключателя.
Код
lc_switch('input[type=checkbox], input[type=radio]', {

  // ON text
  on_txt: 'ON',
   
  // OFF text
  off_txt: 'OFF',

  // Custom ON color. Supports gradients
  on_color: false,

  // enable compact mode
  compact_mode: false

});

4. Методы API
Код
// toggle on
lcs_on(instance);

// toggle off
lcs_off(instance);

// toggle target field
lcs_toggle(instance);

// disable
lcs_disable(instance);

// enable
lcs_enable(instance);

// up<a href="https://www.jqueryscript.net/time-clock/">date</a>
lcs_update(instance);

// destroy
lcs_destroy(instance);

5. Обработчики событий
Код
document.querySelectorAll('input[type=checkbox], input[type=radio]').forEach(function(el) {

  el.addEventListener('lcs-statuschange', function(){
  // ...
  });

  el.addEventListener('lcs-on', function(){
  // ...
  });

  el.addEventListener('lcs-off', function(){
  // ...
  });
   
  el.addEventListener('lcs-enabled', function(){
  // ...
  });

  el.addEventListener('lcs-disabled', function(){
  // ...
  });

});
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: