Ползунок jQuery с индикатором заполнения - PullRequest
Новая
       19

Ползунок jQuery с индикатором заполнения

6 голосов
/ 27 июня 2009

Я собираюсь реализовать пользовательский интерфейс jQuery, чтобы ползунок заполнял одну сторону полосы цветом при перетаскивании ручки, что-то вроде индикатора выполнения. Кто-нибудь может дать мне советы, как мне решить эту проблему?

Заранее спасибо.

1 Ответ

7 голосов
/ 27 июня 2009

Мне, наверное, следовало бы более внимательно изучить документацию slider() . Вот гораздо более простой способ сделать то, что, я думаю, вы ищете. Он уже встроен в пользовательский интерфейс jQuery. Приведенный ниже пример взят прямо со страницы документации jQuery slider(), на которую я ссылался выше. Ключ - это свойство range, переданное в опции. Если задать значение «min», ползунок заполнит левую сторону цветом.

JavaScript: 

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider-range-min").slider("value"));
});

Разметка: 

<div id="slider-range-min"></div>
...