jQuery Mobile 1.4.2 - 带有图标的单选按钮

Question

我正在使用 jQuery Mobile 1.4.2 为表单创建水平（内联）单选。有谁知道如何轻松地将自定义图标（png）或 jQuery Mobile 图标添加到 Radio Form 元素？

http://demos.jquerymobile.com/1.4.2/checkboxradio-radio/

在 w3schools 上有一个不错的横向演示：

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_horizontal

  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue">    
  </fieldset>

Answer 1

您可以通过在单选按钮标签中放置一个 SPAN 并使用一些 jQM 类以及一些新规则将图标内联来做到这一点。在下面的标记中，我在前 2 个中使用了 jQM 图标，在最后一个中使用了自定义图标。第一个显示为白色，带有灰色磁盘，第二个显示为黑色，没有磁盘，第三个是自定义的 23x23px png。

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Choose as many favorite colors as you'd like:</legend>
    <label for="red"><span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span>Red</label>
    <input type="checkbox" name="favcolor" id="red" value="red" />
    <label for="green"><span class="ui-alt-icon ui-icon-bars ui-btn-icon-notext inlineIcon NoDisk"></span>Green</label>
    <input type="checkbox" name="favcolor" id="green" value="green" />
    <label for="blue"><span class="ui-alt-icon ui-icon-myicon ui-btn-icon-notext inlineIcon NoDisk"></span>Blue</label>
    <input type="checkbox" name="favcolor" id="blue" value="blue" />
</fieldset>

为了使图标显示为内联，CSS 添加了相对定位和中间垂直对齐。 ui-alt-icon 用于使 jQM 图标变黑。为了隐藏灰色磁盘，我们将 :after 伪元素的背景颜色设置为透明。最后一条规则创建自定义图标类。

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: auto !important;
}
.NoDisk:after {
    background-color: transparent;
}
.ui-icon-myicon:after {
    background-image: url("http://lorempixel.com/23/23/technics/1/");
    background-size: 23px 23px;
    border-radius: 0;
}

这是一个DEMO