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つのセル/ブロックではなく、1つのセル/ブロックのように見えるものだけに及びます。

4

1 に答える 1

0

私が見たところ、コントロール グループはボタンやチェック ボックスなどで最適に機能します。期待する組み合わせではありません。そこで、2 つの解決策をご紹介します。

グリッドを使用しない場合

次のように、2 つの要素をinline-blockとして作成するだけです。

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

Demo with No grids, No control group.

グリッドの使用

グリッドの使用方法が間違っています。次のようにui-block-a と ui-block-bの 2 つのクラスのみを持つ 2列のグリッドを使用する必要があります。

<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 に答える