将图片添加到单选按钮组中的每个单选按钮

Question

我想实现一个单选按钮组，其中每个单选按钮旁边都有一张图片（在单选按钮的左侧）。

这可能吗？如果是这样，怎么样？

HTML：

<div class="form-group" show-errors>
    <label class="col-md-2 control-label metric-light-16-black pay-form-label">Payment Method</label>
    <div class="col-md-10" id="rdPaymentMethod">
        <label class="radio-group col-md-2">
            <span id="radio-group-1" style="margin-left: 0cm;"></span>
            <span class="radio" style="margin-left: 0cm;" />
            <img src="assets/images/card-mastercard.png" style="margin-left: 0cm;"/>

        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-2" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-viza.png"/>
        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-3" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-paypal.png"/>
        </label>
    </div>
</div>

javascript sap功能：

var placeRadioButtonAt = function(radioButtonId, containingDivId, selected) {
    elements.push(radioButtonId);
    var oRB1 = new sap.ui.commons.RadioButton(radioButtonId, {
        selected : (selected==true),
        select : function() {}
    });

    oRB1.placeAt(containingDivId);
}

调用此功能3次（对于每个单选按钮）：

    placeRadioButtonAt("radio1","radio-group-1",true);
    placeRadioButtonAt("radio2","radio-group-2");
    placeRadioButtonAt("radio3","radio-group-3");

Answer 1

我会扩展RadioButton控件以允许使用每个单选按钮添加图像，并且还扩展RadioButtonGroup以允许将先前的扩展控件添加为聚合。

OBS ：缺少 css类呈现，可以找到有关呈现器实现的更多详细信息here 。

<强>假设：

1. 命名空间在variable "do_token" {} # Configure the DigitalOcean Provider provider "digitalocean" { token = "${var.do_token}" } # Create nodes resource "digitalocean_droplet" "consul" { count = "1" image = "ubuntu-14-04-x64" name = "consul-${count.index+1}" region = "lon1" size = "1gb" ssh_keys = ["7b:51:d3:e3:ae:6e:c6:e2:61:2d:40:56:17:54:fc:e3"] connection { type = "ssh" user = "root" agent = true } provisioner "file" { source = "consul_0.7.1_linux_amd64.zip" destination = "/tmp/consul_0.7.1_linux_amd64.zip" } provisioner "remote-exec" { inline = [ "sudo unzip -d /usr/local/bin /tmp/consul_0.7.1_linux_amd64.zip" ] } } 文件
中定义为my.app
2. 在项目文件夹（webapp或WebContents）中，您已为这些自定义控件创建了一个文件夹，名为index.html

RadioButton扩展

controls

RadioButtonGroup扩展

sap.ui.define(['jquery.sap.global', 'sap/m/Image', 'sap/m/RadioButton'

], function (jQuery, Image, RadioButton) {
    "use strict";

    var CustomRadioButton = RadioButton.extend("my.app.controls.RadioButtonImage", {
        metadata: {
            "properties": {
                "imageSrc": "string"
            },
        },
        renderer: function (oRm, oControl) {
            var oImg = new Image({ src: oControl.getProperty("imageSrc") })
            oRm.renderControl(oImg);
            sap.m.RadioButtonRenderer.render(oRm,oControl);
        }
    });

    return CustomRadioButton;
}, true);