2

私は短期間のUIスライダーユーティリティを使用しており、次の状況で終了しました。結果を使用してオブジェクトの css box-shadow を変更するために、3 つのスライダーを組み合わせました。これは私のコードです: 

$('#slider2, #slider3, #slider4').slider({
    range: 'min',
    min: 0,
    max: 100,
    step: 1,
    animate: true,
    slide: function(x,y,z) {
        var x = $('#slider2').slider('value'),
            y = $('#slider3').slider('value'),
            z = $('#slider4').slider('value')
        $('#xShadowValue').val(x + ' px');
        $('#yShadowValue').val(y + ' px');
        $('#zShadowValue').val(z + ' px');          
        $('#target').css('box-shadow', x + 'px ' + y + 'px ' + z + 'px ' + '#888888');
    }
});

$('#xShadowValue').val($('#slider2').slider('value') + ' px');
$('#yShadowValue').val($('#slider3').slider('value') + ' px');
$('#zShadowValue').val($('#slider4').slider('value') + ' px');

問題は、最初のものをすべて変更したときです。2番目のものを変更すると、最初のものは、2番目のものに対して3番目のものを変更したときに同じユニットをドロップまたは増加します。さらに、それらすべてを 0 または 100 にスライドさせることはできません。それに応じて、1 と 99 に制限が表示されます。事前にサンクス。

4

1 に答える 1

2

これは$("#slider").slider("value")、値を取得するために を使用しているためです。

これは私が見たドキュメントには記載されていませんが、このバグチケットのメモによると、スライダーの新しい値ui.valueを取得するために使用し、スライダーの古い値を取得する方法を使用する必要があります。これはあなたの問題の両方を説明しています。value

それを念頭に置いて、ui.value各スライダーを利用できるように、コードを少し調整する必要があります。

私は2つのことを変更します：

  1. 属性を使用data-*して、どのスライダーがどの軸に対応するかを指定します。

    <div id="slider2" class="slider" data-axis="x"></div>
<div id="slider3" class="slider" data-axis="y"></div>
<div id="slider4" class="slider" data-axis="z"></div>

  2. slideこれらの属性を利用するようにコールバックを更新します。

    var boxShadow = {
    x: 0,
    y: 0,
    z: 0
};

$('#slider2, #slider3, #slider4').slider({
    step: 1,
    animate: true,
    slide: function(event, ui) {
        var axis = $(this).data("axis");

        boxShadow[axis] = ui.value;

        $('#xShadowValue').val(boxShadow.x + ' px');
        $('#yShadowValue').val(boxShadow.y + ' px');
        $('#zShadowValue').val(boxShadow.z + ' px');            

        $('#target').css('box-shadow', boxShadow.x + 'px ' + boxShadow.y + 'px ' + boxShadow.z + 'px ' + '#888888');
    }
});

基本的に、x、y、z を追跡する単純なオブジェクトを保持します。このオブジェクトは、前述のdata-*属性を使用して簡単に更新できます。

例: http://jsfiddle.net/t3gva/

于 2012-02-27T02:30:33.137 に答える