изменить html с помощью jquery select на событие слайдера пользовательского интерфейса - PullRequest
Новая
       21

изменить html с помощью jquery select на событие слайдера пользовательского интерфейса

1 голос
/ 16 марта 2012

Итак, у меня есть выбор и функция для преобразования его в слайдер, используя http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

<select id="{{ section }}-anonymity-select">
    <option value="anonymous"></option>
    <option value="uw-student"></option>
    <option value="username"></option>
</select>

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            alert(ui.value);
        }
    }
    }).hide();

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

Код выполняет почти то, что я хочу, за исключением того, что событие слайда «запускается при каждом движении мыши во время слайда», что означает примерно 10 раз за один маленький слайд. Очень надоедливый. Не то, что я хочу. И, похоже, это также программно меняет значение - мой дескриптор постоянно прыгает повсюду.

Я также пытался изменить, но он срабатывает только при остановке, поэтому, если пользователь просто скользит взад-вперед, но не отпускает кнопку мыши, он не будет предупрежден. плохой.

Как мне справиться с этим? Я думаю, мне нужно что-то вроде "при изменении значения" как событие? Но как реализовать это, не проверяя его постоянно?

Ответы [ 2 ]

0 голосов
/ 16 марта 2012

конечно, через 2 минуты после публикации я понимаю решение. 

var slidervalue = 0;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            if(ui.value!=slidervalue){
                $("#"+section+"-anonymity-header").html("Select anonymity level: "+ui.value);
                slidervalue = ui.value;
            }
        }
    }
    }).hide();
0 голосов
/ 16 марта 2012

Вместо использования события slide следует использовать событие change, которое срабатывает только после того, как пользователь перестает взаимодействовать с виджетом:

Изменение: 

    slide: function(event, ui){
        alert(ui.value);
    }

На: 

    stop: function(event, ui){
        alert(ui.value);
    }

Валаа!:)

Это событие вызывается, когда пользователь прекращает скольжение.

Источник: http://jqueryui.com/demos/slider/#event-stop

Обновление

Вы можете использовать событие slide и установить тайм-аут, чтобы предупредить значение, поэтому, когда пользователь продолжает скользить, оповещение не появится (из-за отмены тайм-аута): 

var slidervalue = 0,
    timer;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            clearTimeout(timer);
            setTimeout(function () {
                if(ui.value!=slidervalue){
                    $("#"+section+"-anonymity-header").html("Select anonymity level: "+$(this).slider('values', ui.value));
                    slidervalue = ui.value;
                }
             }, 100);
        }
    }
    }).hide();
...