jQuery Mobile - 带滑块的并排数字输入

Question

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

说到这里，我把一个数字文本框和一个滑块放在一起。数字文本框显示为大于滑块的文本框。有一点需要注意 - 我已经通过CSS删除了上/下按钮。

尽我所能，我不能让它们以同样的方式显示。有谁知道这需要什么类？在pageinit（）上完成的更改？

Answer 1

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

  

<强> Demo

<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的高度。

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

CSS

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

的jQuery

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