jquery-mobile - 如何将 jquery-mobile 单选按钮的图例样式设置为列表分隔符

Question

将单选按钮放入 fieldset与 data-role="controlgroup" , jquery-mobile 将它们呈现为插入列表，但图例只是文本。我希望图例看起来像 ListView 的列表分隔符。

所以而不是这个:



我想要这样的东西:

Answer 1

您可以将 radiogroup 放在 ListView 中，并使用 listdivider 样式作为标题。要获得与您演示的结果类似的结果，您需要删除一些填充、边距和边框。

请参阅此示例:http://jsfiddle.net/zdMhF/

编码:

<div data-role="page">
    <div data-role="content">
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
    <fieldset data-role="controlgroup">
             <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
             <label for="radio-choice-1">Cat</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
             <label for="radio-choice-2">Dog</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
             <label for="radio-choice-3">Hamster</label>

             <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
             <label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>
</li>
</ul>
</div>
</div>​