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

这是我不久前针对这种情况开发的一些代码。我在输入中有一个名为“data-controlled-by”的属性，该属性设置为与初始化滑块的 div 相同的值。例如，我的 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);
}

然后，在要更新的输入上，添加一个 keyup 处理程序，如下所示：

$('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。这对于输入为 3 位值（如 255）时特别有用。

我真的希望这可以帮助您并促进您的学习！有任何问题请留言！在 keyup 事件处理程序的选择器中，您可以指定任何内容，以获取您希望由/可以控制滑块的所有输入。

于 2011-03-21T12:19:59.910 回答
0

我做了一些小的修改，现在它为所有滑块使用一个输入字段。这是我所做的：在函数“sliderUpdateInput”中，我添加了“document.getElementById(“whatever”).setAttribute(“data-controlled-by”，this.id);”行。然后在输入字段中添加 id="whatever"。现在唯一需要注意的是，滑块属性“data-controlled-by”中的值与滑块的 id 相同，因此您可以使用 this.id 在函数“sliderUpdateInput”中应用它。所以每次点击或拖动滑块时，input-attribute 的值都会更改为对应的滑块。

如果你想显示每个滑块的所有输入，你不需要这个，但在我的脚本中没有所有输入的空间，所以我认为最好还是只使用一个输入，让它有点更有活力。

感谢您的解决方案，我特别喜欢输入的值如何与滑块实时对应。

于 2011-03-28T13:02:08.437 回答