Question

使用jquery-mobile 1.4，我有一组单选按钮：

<fieldset data-role="controlgroup">
  <legend>Radio Group</legend>
  <input type="radio" name="radio" id="radio_foo">
  <label for="radio_foo">Foo</label>
  <input type="radio" name="radio" id="radio_bar">
  <label for="radio_bar">bar</label>
  <input type="radio" name="radio" id="radio_baz">
  <label for="radio_baz">Baz</label>
</fieldset>

（这是jQuery Mobile 1.4文档显示http://demos.jquerymobile.com/1.4.0/checkboxradio-radio/）

我想为每个选项提供一个信息图标，除了单选按钮外，它可以点击，但与单选按钮位于同一行。像这样：

http://i.stack.imgur.com/TnNl5.png

这将代替每个选择的工具提示。

Answer 1

一种方法是将信息按钮放在他们自己的控制组中，并使用jQM网格将2个控制组放在彼此旁边

这是 DEMO

    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 40px; margin-right: 8px;">
            <fieldset data-role="controlgroup">
                <legend>&nbsp;</legend> 
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>  
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>
                <a href="#" class="ui-btn ui-corner-all ui-icon-info ui-btn-icon-notext">Icon only</a>
            </fieldset>
        </div>
        <div class="ui-block-b" style="width: 70%;">
            <fieldset data-role="controlgroup">
                <legend>Radio Group</legend>
                <input type="radio" name="radio" id="radio_foo" />
                <label for="radio_foo">Foo</label>
                <input type="radio" name="radio" id="radio_bar" />
                <label for="radio_bar">bar</label>
                <input type="radio" name="radio" id="radio_baz" />
                <label for="radio_baz">Baz</label>
            </fieldset>
        </div>
    </div>

用于收音机和复选框选择的jQuery-Mobile Info按钮

1 个答案: