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