0

我开始使用 JQueryMobile 并且喜欢它。我想知道是否有办法在标准文本输入旁边放置一个预先选择的菜单。

例如，如果文本输入是一个名字，那么前面的选择将包含 Mr、Mrs 等。

编辑1：

我查看了控制组文档，对于像按钮这样的情况，它可以工作，例如

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
</div>

但是，如果我使用像这样的输入

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Icon only</a>
    <input type = "text" name = "some_input" id = "some_input">
</div>

它给出了一个奇怪的结果，输入与按钮重叠。

编辑2：

我看过网格，但看不到让 div 跨越 2 个网格的方法。例如

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b ui-block-c">Block C</div>
</div>

我已经尝试了上述方法，但它不能按预期工作，例如

<div class="ui-grid-c">
    <div class="ui-block-a">
        <label for = "full_name">
            Name
            <select id = "honorific" data-mini="true" data-inline="true">
                <option value = "mr">Mr</option>
                <option value = "mrs">Mrs</option>
                <option value = "miss">Miss</option>
            </select>
        </label>
    </div>
    <div class="ui-block-b ui-block-c ui-block-d">
        <input type="tel" data-clear-btn="true" id = "full_name" name = "full_name">
    </div>
</div>

只需在全名标签下方生成选择框，输入仅跨越似乎是一个单元格/块的内容 - 而不是网格的 3 个单元格/块。

4

1 回答 1

0

从我所见，控制组最适合按钮、复选框等。而不是您期望的组合。所以这里有两个解决方案给你。

不使用网格

您只需将这两个元素设置为inline-block，如下所示：

.ui-select, .ui-input-text {
    display:inline-block
}

Demo with No grids, No control group.

使用网格

您使用网格的方式是错误的。你必须使用两列网格，它只有这两个类：ui-block-a 和 ui-block-b，像这样：

<div class="ui-grid-b">
  <div class="ui-block-a">Block A</div>
  <div class="ui-block-b">Block B</div>
</div>

这将相应地缩放您的标记。下面是 HTML 的样子：

<div class="ui-grid-a">
  <div class="ui-block-a" style="width:100px">
    <select name="select-choice-min" id="select-choice-min" data-mini="true">
       <option>Mr.</option>
       <option>Mrs.</option>
       <option>Ms.</option>
    </select>
  </div>
  <div class="ui-block-b">
    <input type="text" name="name" id="name" value="" placeholder="Enter Name" />
  </div>
</div>

Demo with grids

于 2013-08-17T08:02:04.557 回答