Question

我正在尝试构建一个滑块（非范围）。我想滑块在3-4个输入元素中显示数据（可能是一个选择框）。在构建小部件时，我有点像新手。使用jQuery v2.1.0和JQM v1.4.5，添加jQuery-UI不是问题，只要它具有响应性并适用于移动设备。

<div id="slider">
  <div id="slider"></div>
</div>
<input id="amount" readonly type="text">
<div class="data-display">
  <input id="result1" readonly type="text">
  <input id="result2" readonly type="text">
  <input id="result3" readonly type="text">     
  <select id="result4" readonly type="text">
</div>

我想在堆栈溢出减去计算时发现这样的小提琴。数据显示不需要计算：

http://jsfiddle.net/eqnLc9fg/1/

数据具体/唯一。滑块将显示数据：

1st input = 149.0 F
2nd input = 100.6 C
3rd input = 57.8 psig
4th input (select) = 4.00 bar
(this would be center of the slider)

1st input = 150.0 F
2nd input = 101.1 C
3rd input = 56.8 psig
4th input (select) = 3.87 bar

一个滑块中有30-50个这样的数据集。所有具体的范围都是不可能的。

选择框还可以控制其他输入和滑块。

不是100％确定滑块小部件是否是我尝试做的最佳选择。已考虑iscroll垂直或表溢出。滑块似乎是我的最佳选择，将所有内容保存在一个屏幕上。也可以提供建议。

我希望我所要求的是清楚的！ ; ）

___选择方框_____输入框____

-----------------滑块-----------------

____输入框____ ____输入框____

谢谢！

这样的事情可以更好地解释：

http://jsfiddle.net/Mottie/VfBkk/

Answer 1

你可以像这样构建它：

<div class="ui-grid-a">
  <div class="ui-block-a">
    <input id="result1" readonly type="text" />
  </div>
  <div class="ui-block-b">
    <input id="result2" readonly type="text" />
  </div>
</div>

<!-- /grid-a -->
<div class="full-width-slider">
  <input type="range" name="slider" id="slider" min="0" max="13" value="6" />
</div>
<div class="ui-grid-a">
  <div class="ui-block-a">
    <input id="result3" readonly type="text" />
  </div>
  <div class="ui-block-b">
    <select id="result4" readonly >
      <option value="0">The 1st Option</option>
      <option value="1">2Option</option>
      <option value="2">3Option</option>
      <option value="3">4Option</option>
      <option value="4">5Option</option>
      <option value="5">6Option</option>
      <option value="6">7Option</option>
      <option value="7">8Option</option>
      <option value="8">9Option</option>
      <option value="9">10Option</option>
      <option value="10">11 Option</option>
      <option value="11">12 Option</option>
      <option value="12">13 Option</option>
      <option value="13">14 Option</option>
    </select>
  </div>
</div>

这是用于隐藏滑块输入并使其全宽的CSS：

/* Hide the number input */
.full-width-slider input {
    display: none !important;
}
 .full-width-slider .ui-slider-track {
    margin-left: 15px;
}

我正在使用JQM网格布局控件，但您可以通过其他方式执行此操作。然后在脚本中捕获滑块的更改事件以更新输入：

var menSizes = Array(14)
    menSizes[0] = [5, 6, 38];
    menSizes[1] = [5.5, 6.5, 38.5];
    menSizes[2] = [6, 7, 39];
    menSizes[3] = [6.5, 7.5, 40];
    menSizes[4] = [7, 8, 40.5];
    menSizes[5] = [8, 9, 42];
    menSizes[6] = [8.5, 9.5, 42.5];
    menSizes[7] = [9, 10, 43];
    menSizes[8] = [9.5, 10.5, 44];
    menSizes[9] = [10, 11, 44.5];
    menSizes[10] = [10.5, 11.5, 45];
    menSizes[11] = [11, 12, 46];
    menSizes[12] = [11.5, 12.5, 46.5];
    menSizes[13] = [12, 13, 47];

$(document).on("pagecreate", "#page1", function(){
  $("#slider").on("change", function(){
    var sel = menSizes[$(this).val()];
    $("#result1").val(sel[0]);
    $("#result2").val(sel[1]);
    $("#result3").val(sel[2]);        
    $("#result4").val($(this).val()).selectmenu("refresh");
  });  
});

正在使用 DEMO

jQuery滑块显示具有特定数据JQM的多个输入

1 个答案: