0

このページは (公式の jquery ドキュメント以外の) リファレンスのように思われるため、jquery に関する高度な質問については、ここに質問を投稿します。最大 80 個 (!) のスライダーを備えた ajax フォームがありますが、基本的には正常に動作しています。ただし、0 から 500 までの範囲を持ついくつかのスライダーがあります。特に、スライダーの高さが約 90 ピクセルしかないため、多くのステップがあります。スライダーを特定の値に移動することは、ほとんど不可能な場合もあります。

そのため、入力フィールドを介して値を入力する機会を追加したいと考えています。おそらく80個の入力を生成しなくても、これを実現する方法はありますか? 私の考えは、特定のハンドルをクリックすると、入力フィールドに送信された値が取得されるようなものです。これは問題なく動作するはずですが、入力フィールドに値を入力するとハンドルに送信されるように、接続を「逆」にするにはどうすればよいですか?

事前に感謝します、これは素晴らしいサイトです...

マシェク

4

3 に答える 3

1

.change()入力ボックスのdocsイベントを使用し、スライダーのvaluedocsメソッドを呼び出して更新できます。

$('#your_input_id').change(function(){
                      $('#slider_id').slider('option','value',this.value);
                  });

例http://jsfiddle.net/gaby/MXZGE/ (黄色の値は更新可能です)

于 2011-03-21T12:30:17.333 に答える
0

私はいくつかの小さな変更を行いましたが、今ではすべてのスライダーに対して1つの入力フィールドで動作します。これが私がしたことです：関数 "sliderUpdateInput"で、行 "document.getElementById（" whatever "）。setAttribute（" data-controled-by "、this.id）;"を追加しました。次に、入力フィールドにid="whatever"を追加しました。ここで注意する必要があるのは、slider属性「data-controled-by」の値がスライダーのIDと同じであるため、this.idを使用して関数「sliderUpdateInput」で適用できることです。したがって、スライダーをクリックまたはドラッグするたびに、input-attributeの値が対応するスライダーに変更されます。

とにかく各スライダーのすべての入力を表示したい場合は、これは必要ありませんが、私のスクリプトでは、すべての入力の余地がなかったので、とにかく1つの入力だけを使用して、少しだけ持つ方が良いと思いましたよりダイナミック。

あなたの解決策に感謝します、私は特に入力の値がリアルタイムでスライダーとどのように対応するかが好きです。

于 2011-03-28T13:02:08.437 に答える
0

この状況のた​​めに少し前に開発したコードを次に示します。入力に、スライダーが初期化される div と同じ値に設定された「data-control-by」という属性があります。たとえば、私はこれをhtmlに持っています：

<div id="slider-1" data-controls="slider-1-slider-blah"></div>
<input name="whatever" data-controlled-by="slider-1-slider-blah" />

私の js では、最初にスライダーを次のように初期化します。

$("#slider-1").slider({
  min: 0,
  max: 20,
  value: $("input[data-controlled-by='slider-1-slider-blah']").val(),
  slide: sliderUpdateInput,
  stop: sliderUpdateInput
});

sliderUpdateInput上記のコールバック関数は、スライド (ユーザーがスライドしている間) と停止 (ユーザーがスライドを停止したとき) の両方のイベントで使用されていることに注意してください。これがどのように見えるかです：

function sliderUpdateInput(e,u) {
  var slider = $(u.handle).parent();
  var controlled_input = $('input[data-controlled-by="' + slider.attr('data-controls') + '"]');
  if( u.value <= slider.slider('option', 'min') )
    controlled_input.val('');
  else
    controlled_input.val(u.value);
}

次に、更新する入力に、次のようにキーアップ ハンドラーを追加します。

$('input[name="whatever"]').keyup(function(e) {
  var slider = $("div[data-controls='" + $(this).attr('data-controlled-by') + "']");
  var slider_min = slider.slider('option', 'min');
  var slider_max = slider.slider('option', 'max');

  // left or down
  if( e.keyCode == 37 || e.keyCode == 40 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_min )
      $(this).val( parseInt( $(this).val() ) - 1 );
    $(this).select();
  }
  // right or up
  else if( e.keyCode == 39 || e.keyCode == 38 ) {
    if( isNaN( parseInt( $(this).val() ) ) )
      $(this).val(slider_min);
    if( parseInt( $(this).val() ) != slider_max )
      $(this).val( parseInt( $(this).val() ) + 1 );
    $(this).select();
  }

  if( !isNaN( parseInt($(this).val()) ) )
    slider.slider('value', parseInt( $(this).val() ) );
  else
    slider.slider('value', slider_min );
});

更新: さらなる説明

ここでチェックされる上下左右のキーコードに注意してください。これは、ユーザーがいずれかの方向にスライダーを 1 ずつ微調整できるようにするためです。これは、入力が 255 のような 3 桁の値の場合に特に便利です。

これがあなたを助け、あなたの学習に拍車をかけることを本当に願っています！質問があればコメントしてください！keyup イベント ハンドラーのセレクターでは、スライダーで制御したい/制御できるすべての入力を取得するものを指定できます。

于 2011-03-21T12:19:59.910 に答える