0

1〜10の評価スケールでjQueryUIスライダーを使用しています。スライダーにホバーサポートを追加したいと思います。現在、スライドすると、評価スケールを上げるとスライダーの色が変わります。また、スライダーの外側に1/10のスケールが表示されます。

スライダーの一部にカーソルを合わせて適切な色に変更し、カーソルがホバーしている場所に基づいて1/10を適切な評価に変更する機能を追加したいと思います。ただし、ユーザーがスライダーをクリックして評価を保存するまで、実際の変更イベントを発生させたくありません。クリックせずにホバーすると、元のオンロード状態に戻ります。

これは可能ですか？スライダーはホバー機能を提供しますか？

4

2 に答える 2

2

jQueryフォーラムのおかげで、必要なことを達成することができました。以下は、このスレッドに基づく私のソリューションです：http: //forum.jquery.com/topic/add-hover-preview-support-to-jquery-ui-slider

それはうまく機能しますが、私が抱えているFirefoxの問題がまだ1つあります。私はバグを新しいスレッドに分解しました：jQueryのmousemoveの不規則な動きとFirefoxでのびくびくした結果

$('#user-rating-slider').slider({
    value: userRating,
    min: 0,
    max: 10,
    step: 1,
    slide: function(event, ui) {
        updateSlider(ui.value);
    },
    change: function(event, ui) {
        ...
    }
}).on({
    mousemove: function(e) {
        e.stopPropagation();

        var width = $(this).width();
        var offset = $(this).offset();

        var value = Math.round(((e.pageX - offset.left) / width) * (10 - 0)) + 0;

        updateSlider(value);
    },
    mouseout: function() {
        updateSlider(userRating);
    }
});
于 2012-07-16T15:41:52.450 に答える
0

新しい関数にカーソルを合わせたときに現在のスライダーの状態を保存し、カーソルを合わせたスライダーにアニメーション化する別の関数を作成します。リリース時に、保存されたスライダーの位置に戻ります。クリックすると、元のコードと同じスライダー機能が使用されます。

于 2012-07-14T22:43:35.923 に答える