如何使用格式化内容在jQueryMobile 1.4.2中设置Radiobutton列表的样式

Question

我正在尝试在jQueryMobile 1.4.2中创建类似下面的内容 - 即包含解释每个选项的内容的单选按钮列表。这是来自this great article best practices article.版本1.2的jquery屏幕截图。描述文本的大小小于正文文本。

然而，当我直接从中复制他的示例代码时，它的大小不正确（参考大小显示的其他控件）。

以下是示例代码

<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">
        <h3 class="ui-li-heading">jQuery Mobile</h3>
        <p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />          
    <label for="radio-choice-2">
        <h3 class="ui-li-heading">Sencha Touch</h3>
        <p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
    </label>            

    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />          
    <label for="radio-choice-3">
        <h3 class="ui-li-heading">jQTouch</h3>
        <p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
    </label>            
</fieldset>

原来上面代码不再有效的原因是它引用了css类名ul-li-desc 使用在jquery mobile 1.2.1 css但不再是最新的css for version 1.4.2。

新的1.4.2版本包含ListView component中非常相似的示例代码，如下所示

减少字体大小的c​​ss类是.ui-listview>li p

那么在jQuery Mobile 1.4.2中创建一个添加内容并不大的单选按钮列表的正确方法是什么？

Answer 1

解决jQM CSS结构的最简单方法是firebug当前视图。 jQM基于 widget 更改HTML标记，因为它添加了额外的元素并将其他元素包装到每个最终的UI中。

请记住，在覆盖jQM样式时，您必须具体而谨慎。大多数小部件共享相同的类（全局类）。

另请注意，从jQM 1.4开始提高性能，团队已经减少了用于样式化小部件的内部元素的数量。

/* <p> within <label> */
label p {
  font-size: .9em;
  font-weight: 400;
  display: block;
}

/* <h3> & <p> within <label> */
label h3, label p {
  margin: .45em;
}

/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after {
  top: 35% !important;
}

  

<强> Demo