jquery-mobile - jQuery Mobile - 使用滑块并排输入数字

Question

我正在使用 jQuery Mobile。我试图允许用户以两种方式更改滑块值。一个数字或百分比。例如，假设某个指标的总和为 224 美元。所以 50% 是 112 美元。好吧，我希望用户能够手动指定 100 美元，或者手动指定 50%。

话虽如此，我将一个数字文本框和一个滑块放在一起。数字文本框看起来更大并且与滑块的文本框不同。需要注意的一件事 - 我已经通过 CSS 删除了向上/向下按钮。

尽我所能，我无法让这些以相同的方式显示。有谁知道这需要什么课程？在 pageinit() 上所做的更改？

Answer 1

要将元素并排放置，请使用ui-grid布局。对于两个项目，将类添加ui-grid-a到 div。然后首先用 div 和 classui-block-a和另一个 class包装ui-block-b。

演示

<form>
 <div class="ui-grid-a">
  <div class="ui-block-a">
   <label for="numbers"></label>
   <input type="number" name="numbers" id="number" />
  </div>
  <div class="ui-block-b">
   <label for="slider-6" class="ui-hidden-accessible">Slider:</label>
   <input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
  </div>
 </div>

可选 - 覆盖子 div 的宽度。

.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }

对于输入，您需要通过 jQuery 或 CSS 调整输入的父 div 的高度。

注意： Slider 也有type=number属性，因此，您只需要覆盖具有 class 的输入框ui-input-text。

CSS

div.ui-input-text { height: 28px !important }

jQuery

$('[type=number]').closest('div.ui-input-text').css('height', '28px');