javascript - jQuery slider 显示具有特定数据 JQM 的多个输入

Question

我正在尝试构建一个 slider (非范围)。我希望 slider 在 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>

我想要像我在 stack-overflow 上找到的这个 fiddle 减去计算。无需计算，仅需数据展示:

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

数据是特定的/唯一的。 slider 将显示数据:

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

一个 slider 中将包含 30-50 组这些数据。所有特定的，范围是不可能的。

选择框还将控制其他输入和 slider 。

不能 100% 确定 slider 小部件是否是我尝试做的事情的最佳选择。考虑过 iscroll vertical 或 table with overflow。 Slider 对我来说似乎是最好的选择，它将所有内容都放在一个屏幕中。也欢迎提出建议。

我希望我问的很清楚! ; )

___选择框____ ___输入框____

---------------- slider ----------------

____输入框____ ____输入框____

谢谢!

像这样更好地解释:

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>

这是隐藏 slider 输入并使其全宽的 CSS:

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

我正在使用 JQM 网格来布置控件，但您可以通过其他方式来完成此操作。然后在脚本中捕获 slider 的更改事件以更新输入:

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");
  });  
});

Working DEMO