Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
LC Switch - Плагин JavaScript для скользящих переключателей (checkbox и radio)
Дата добавления: 06.02.2021 - 21:08
Добавил: Buger
Количество просмотров: 1.3k
Количество комментариев: 0
Размер файла: 7.6 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
LC Switch - это крошечный плагин jQuery и Vanilla JS, который преобразует checkbox и radio по умолчанию в красивые переключатели или кнопки переключения с плавными эффектами скольжения, основанными на переходах CSS3.
Демонстрация в архиве (файл: demo.html)
1. Загрузите и подключите библиотеку jQuery и файлы плагина jQuery LC Switch в свой проект.
2. Вызовите плагин для checkbox и radio. Об остальном позаботится плагин.
3. Функции.
4. События.
1. Загрузите LC Switch V2 и подключите lc_switch.js в документ.
2. Прикрепите плагин к checkbox и radio кнопкам.
3. Возможные варианты плагина для настройки переключателя.
4. Методы API
5. Обработчики событий
Как использовать (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" />
<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();
$('input').lcs_on();
// toggle off
$('input').lcs_off();
// destroy
$('input').lcs_destroy();
4. События.
Код
// срабатывает каждый раз, когда поле меняет статус
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
console.log('field changed status: '+ status );
});
// срабатывает каждый раз, когда поле проверяется
$('body').delegate('.lcs_check', 'lcs-on', function() {
console.log('field is checked');
});
// срабатывает каждый раз, когда снимается флажок
$('body').delegate('.lcs_check', 'lcs-off', function() {
console.log('field is unchecked');
});
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
console.log('field changed status: '+ status );
});
// срабатывает каждый раз, когда поле проверяется
$('body').delegate('.lcs_check', 'lcs-on', function() {
console.log('field is checked');
});
// срабатывает каждый раз, когда снимается флажок
$('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
});
// 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 date
lcs_update(instance);
// destroy
lcs_destroy(instance);
lcs_on(instance);
// toggle off
lcs_off(instance);
// toggle target field
lcs_toggle(instance);
// disable
lcs_disable(instance);
// enable
lcs_enable(instance);
// up date
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(){
// ...
});
});
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(){
// ...
});
});
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: