1

だから私は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を変更したい）、ユーザーがスライドしているときにスライダーの現在の値を警告することです。

このコードは、スライド イベントが「スライド中にマウスを動かすたびにトリガーされる」ことを除いて、私が望むほとんどのことを行います。これは、1 つの小さなスライドで約 10 回を意味します。とてもうるさい。私が欲しいものではありません。また、プログラムで値を変更するようにも見えます-私のハンドルはいたるところにジャンプし続けます。

私も変更を試みましたが、停止時にのみトリガーされるため、ユーザーが前後にスライドしているだけでマウスボタンを離していない場合、アラートは発生しません。悪い。

どうすればこれを処理できますか? イベントとして「on value change」のようなものが必要だと思いますか？しかし、常にチェックせずにそれを実装するにはどうすればよいでしょうか?

4

2 に答える 2

0

イベントを使用するのではなく、ユーザーがウィジェットとの対話を停止した場合にのみ発生するイベントを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();
于 2012-03-15T20:09:19.577 に答える
0

もちろん、投稿してから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();
于 2012-03-15T20:15:30.763 に答える