Как использовать переключатели ON/OFF вместо флажков и кнопок радио, как показано на рисунке, чтобы украсить дизайн сайта.
Надеюсь это поможет. Проверьте это!
$(document).ready(function() {
// Switch toggle
$('.Switch').click(function() {
$(this).toggleClass('On').toggleClass('Off');
});
});
Если вы хотите сделать свою руку, в основном у вас есть такая структура:
<div class='button' id='button-0'>
<div class='button-switcher left' id='button-switcher-0'></div>
</div>
И со сценарием вы анимируете внутренний div таким образом:
var switchButton = function() {
$(this).toggleClass('left, right');
var versus = $(this).hasClass('right') ? 1 : -1;
var targetLeft = versus * parseInt($(this).parent().css('width')) / 2;
$(this).animate({
'left': '+=' + targetLeft + "px"
});
}
$('.button-switcher').on('click', switchButton);
Взгляните на рабочую демонстрацию.
Пользовательский интерфейс кнопок можно создать с помощью css, и вы можете использовать метод переключения jquery.
http://api.jqueryui.com/toggle/
После того, как вы написали css для кнопок, вам просто нужно добавить класс css и удалить css-класс для кнопки.