将单选按钮放在带有data-role =“controlgroup”的字段集中,jquery-mobile将它们渲染为插入列表,但图例只是文本.我希望图例看起来像列表视图的列表分隔符.
所以不是这样的:
我想要这样的东西:
解决方法
您可以将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>