0

jQuery Range スライダーを使用して、ユーザーが 1 日の時間範囲 (つまり、10:00 - 18:00) を選択できるようにしています。

現時点ではすべて正常に動作しており、出力がテキスト ボックスに表示されていますが、これは理想的ではありません。2 つの値を別々に表示し、ハンドルをドラッグするとハンドルに追従する、ハンドルごとに個別のツールチップを用意したいと思います。スライドハンドル自体に時間を入れることができなかった.

私の問題は、特定のハンドルをターゲットにするにはどうすればよいですか? それらはjQueryによって動的に作成され、クラスによってのみ定義されるため、divを特定のハンドルにリンクする方法がわかりません。

ここで検索したところ、同様の質問がいくつか見つかりましたが、実際にこれに答えるものはありませんでした。

また、プラグインを使用したくありません。1つまたは2つ存在することは知っていますが、これはサイトの1つの場所でのみ発生しているため、かなり単純なファイルを含める必要はありません（たとえそれが私を打ち負かしたとしても:P）

4

3 に答える 3

5

これが少し古いことは知っていますが、他の人が私の興味のある解決策を見つけるかもしれないと思います（または、少なくともそのゴミの理由を教えてください）。

私は基本的に JQuery を使用して、スライダーのハンドルに使用されるspan要素内に要素を挿入しました。aの内容は、スライダーのイベントspanを使用してハンドルが移動するたびに更新されます。changeスパン自体は css を使用してスタイル設定されているため、ハンドルの上にカーソルを置いたときにのみ表示され、ハンドル自体の少し上に表示されます。したがって、次のようになります。

スライダー値のツールチップ

slider-rangeしたがって、私のスライダーは、次のようなクラスを持つすべての要素に追加されます。

$(".slider-range").each(function () {
    $(this).slider({
        range: true,
        animate: true,
        min: 1,
        max: 10,
        values: [lower, upper],
        change: function () {

            // get slider values
            var lower = $(this).slider("values", 0);
            var upper = $(this).slider("values", 1);

            // update spans with slider values
            $(this).children("a.ui-slider-handle").first().children("span").html(lower);
            $(this).children("a.ui-slider-handle").last().children("span").html(upper);
        }
    });

    // add the span element to the handle
    $(this).children("a.ui-slider-handle").html("<span class='Slider_Value'></span>");
});

css は次のようになります。

a.ui-slider-handle span.Slider_Value{
    position: absolute;
    top: -35px;
    left: -2px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

a.ui-slider-handle:hover span.Slider_Value{
    display: block;
}

そしてそれだけです！楽しい

于 2012-12-12T11:32:04.143 に答える
2

素晴らしい努力ですが、完璧には機能しません。初めてハンドルをマウスでホバーしたとき。デフォルト値は表示されません。同じ CSS スタイルでこれを試してください。

$(function() {
            var tooltip = function(sliderObj, ui){
                val1            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 0) +'</div>';
                val2            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 1) +'</div>';
                sliderObj.children('.ui-slider-handle').first().html(val1);
                sliderObj.children('.ui-slider-handle').last().html(val2);                  
            };

            $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( e, ui ) {
                tooltip($(this),ui);                    
              },              
              create:function(e,ui){
                tooltip($(this),ui);                    
              }
            });
        });
于 2013-05-20T12:02:09.163 に答える
2

各値に個別にアクセスする必要がある場合は、slide関数をアタッチして各ターゲットを個別に更新できます。さらに、これら 2 つのターゲットのそれぞれから個別にスライダーを変更できるようにしたい場合は、このvalues方法で簡単に機能します。

編集

私はあなたの質問を少し誤解したと思います。次のようないくつかのセレクターを使用して、ハンドラーとその位置を取得できます。

var offset1 = $(this).children('.ui-slider-handle').first().offset();
var offset2 = $(this).children('.ui-slider-handle').last().offset();

以下は、その情報を使用して、ドラッグしたときにそれらのアイテムにツールチップを表示する方法の例です。

例: http://jsfiddle.net/niklasvh/vW7vy/

于 2011-06-02T11:49:16.553 に答える