Пользовательский интерфейс JQuery - слайдер - PullRequest
Новая
       27

Пользовательский интерфейс JQuery - слайдер

3 голосов
/ 01 мая 2011

Я пытаюсь использовать jQuery UI Slider. И что я хочу сделать: для каждого шага в ползунке я хочу нарисовать точку (.) В ползунке. Пункт, который я хочу поставить, - это изображение, которое у меня есть.

Есть предложения?

Спасибо за помощь. С наилучшими пожеланиями.

1 Ответ

1 голос
/ 01 мая 2011

Вы можете сделать это с помощью небольшого трюка. Вы можете настроить div следующим образом: 

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;}

А затем в функции слайдера слайдера вы можете настроить ширину этого div: 

// ... slider settings ....
slide: function (event, ui) {
    $('#imgSlider').width = ui.value;
}

Таким образом, вы открываете только часть этого div, и это создает иллюзию добавления / удаления отдельных изображений. Если вам нужен какой-то статический фон, просто поместите #imgSlider в другой div и создайте фон.

OR

Вы можете сделать это таким образом (что было моей первой идеей):

  1. Создайте функцию 'Drawing', которая будет добавлять или удалять изображение в div (или любой элемент).
  2. Добавьте параметр к этой функции, который будет определять, будет ли изображение добавлено или удалено (подойдет простое логическое значение).
  3. Используйте ползунок с опцией slide, которая принимает функцию (как вы можете увидеть на странице примеров jQuery UI).
  4. В этой функции slide проверьте, является ли текущее значение ниже или выше нового значения. Вы получите значение true / false (т. Е .: новое значение ползунка меньше или нет?).
  5. Вызовите функцию 'рисования' с параметром, который вы только что получили, сравнивая значения - так будет и сейчас, если нужно добавить или удалить это изображение.

Затем вы выполните некоторые тонкие настройки, такие как обработка минимального и максимального значения. Но логика должна работать.

...