Представление индикаторов и меток вех для ползунка пользовательского интерфейса

Использование HTML и JavaScript

Я создал ползунок, который успешно реагирует в обоих направлениях с помощью опции выбора. Однако я решил «скрыть» поле выбора. Мне было интересно, может ли кто-нибудь дать мне какие-либо советы по созданию меток для ползунка, поскольку пользователь теперь понятия не имеет, что он выбирает. Примеры, которые я нашел, показывают идеальные индикаторы, вехи и плавающие числа при наведении курсора, но все это связано с ползунком, а не с метками. Помощь!

Мой штрих-код слайдера JavaScript

        $(function() {
            var select = $( "#logbytes");
            var slider = $( " <div id='slider'></div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });

            $('#logbytes').after(slider).hide();
        });

javascript html jquery css uislider
person smurf    schedule 06.09.2011    source источник
comment
Что ты конкретно имеешь ввиду? Что-то вроде метки с текущим значением над div?   -  person Py.    schedule 06.09.2011
comment
Да, просто что-то, что указывает на то, что было выбрано, потому что все, что у меня есть, это ползунок. Или похожая временная шкала под ползунком, например 0 1 2 3 4   -  person smurf    schedule 06.09.2011

Ответы (1)


arrow_upward
0
arrow_downward

Основная идея состоит в том, чтобы обернуть слайдер внутри div-обертки. Затем добавить еще один div внутри оболочки. Его текст будет текущим значением ползунка.

И тогда единственное, что осталось сделать, это переместить этот div и обновить его текст. Это что-то вроде:

slide: function(event, ui) {
    $( ".amount" ).text( ui.value );
    $( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}

Где min и max - это min и max вашего ползунка.

См. пример на http://jsfiddle.net/WYdLF/.

person Py.    schedule 06.09.2011