Адаптируйте мой js-код к входу

Question

У меня есть этот код JavaScript, который создает слайдер:

http://jsfiddle.net/samccone/ZMkkd/

Теперь я хочу использовать этот код на входе флажка.проблема в том, что код создает дочерний элемент, который перемещается в его родительском элементе с использованием позиции css, а вход не может иметь дочерний элемент.

Моя идея заключалась в том, чтобы использовать background-position и просто перемещать фон вводаслева направо, используя css вместо реального позиционирования.

Как мне адаптировать этот скрипт?Думаю, это довольно легко, но после нескольких попыток я просто сдался, я не достаточно хорош:).

Спасибо за вашу помощь,

Кристофер

Answer 1

Хотите верьте, хотите нет, но для флажков эффект переключения можно создать без JavaScript.

Если вы добавите свой флажок с меткой:

<input type="checkbox" id="jim" />
<label for="jim"></label>

Вы обнаружите, что можетевыберите метку с помощью следующего селектора брата:

input + label { /* some CSS */ }

Почему это полезно?Поскольку с помощью псевдо-селектора: флажок, теперь вы можете стилизовать метку на основе состояния флажка:

input + label { background-position: 0 0; }
input:checked + label { background-position: 100% 0; }

Очевидно, что из-за атрибута for = "jim" нажатие на метку изменит состояниеиз флажка.Поэтому, если вы скроете флажок, вы получите стильную, кликабельную метку.

input { display: none; }

Конечно, у меток могут быть дети, поэтому вы можете быть настолько необычными со своимивоссоздание свитча.И вы должны быть осторожны, чтобы включить: стили фокуса также для тех, кто вкладывает в ваш флажок, а не нажимает на него.

Для браузеров, которые не поддерживают псевдокласс: checked (IE8 и ниже), этодовольно легко эмулировать с помощью глобального обработчика и «проверенного» класса.Что-то вроде:

jQuery(document).bind('change', function(e){
  var elem = jQuery(e.target);

  // If this is not a checkox, do nothing.
  if (elem.attr('type') !== 'checkbox') { return; }

  // Add or remove checked class based on current state.
  if (elem.attr('checked')) { elem.removeClass('checked'); }
  else { elem.addClass('checked'); }
});

... должно это сделать.

Answer 2

Вам может понадобиться сохранить некоторые данные в свойствах объекта (или .data() api), но ваша идея положения фона должна работать просто отлично. Просто замените ваши звонки на .offset().left на .css('background-position') (вам нужно будет split и parseInt возвращаемую строку), и держите плагин подальше.