将图片添加到单选按钮组中的每个单选按钮 [英] Add a picture to each Radio Button in Radio Button Group

问题描述

我想实现一个单选按钮组，其中每个单选按钮旁边都会有一张图片(在单选按钮的左侧).

这可能吗?如果是这样，如何?

html:

<label class="col-md-2 control-label metric-light-16-black pay-form-label">付款方式</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 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 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"/>

javascript sap 函数:

var placeRadioButtonAt = function(radioButtonId, containsDivId, selected) {element.push(radioButtonId);var oRB1 = new sap.ui.commons.RadioButton(radioButtonId, {选择:(选择==真)，选择:函数(){}});或RB1.placeAt(包含DivId);}

调用此函数 3 次(对于每个单选按钮):

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

解决方案

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

OBS:缺少 css 类渲染，可以找到有关渲染器实现的更多详细信息 这里.

假设:

1. 命名空间被定义为 my.app 在 index.html 文件中
2. 在您的项目文件夹(webapp 或 WebContents)中，您为这些自定义控件创建了一个文件夹，名为 controls

单选按钮扩展

sap.ui.define(['jquery.sap.global', 'sap/m/Image', 'sap/m/RadioButton'], 函数 (jQuery, Image, RadioButton) {严格使用"；var CustomRadioButton = RadioButton.extend("my.app.controls.RadioButtonImage", {元数据:{特性": {"imageSrc": "字符串"},},渲染器:函数(oRm，oControl){var oImg = new Image({ src: oControl.getProperty("imageSrc") })oRm.renderControl(oImg);sap.m.RadioButtonRenderer.render(oRm,oControl);}});返回自定义单选按钮；}， 真的);

RadioButtonGroup 扩展

sap.ui.define(['jquery.sap.global', 'sap/m/RadioButtonGroup'], 函数 (jQuery, RadioButtonGroup) {严格使用"；var CustomRadioButtonGroup = RadioButtonGroup.extend("my.app.controls.RadioButtonGroup", {元数据:{聚合:{按钮:{type:my.app.controls.RadioButtonImage"，多个:true，singularName:button"，bindable:bindable"}},默认聚合:按钮"，}});返回 CustomRadioButtonGroup;}， 真的);

I want to implement a Radio Button Group where every Radio Button will have a picture next to it (on the left side of the radio button).

Is that possible? If so, how?

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 function:

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);
}

calling this function 3 time (for each radio button):

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

解决方案

I would extend the RadioButton control for allowing images to be added with each radio button, and also extend the RadioButtonGroup to allow adding the previous extended control as an aggregation.

OBS: css classes rendering are missing, more details on renderer implementation can be found here.

Assumptions:

1. The namespace was defined as my.app inside the index.html file
2. Inside your project folder (webapp or WebContents) you have created a folder for these custom controls, named controls

RadioButton extension

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);

RadioButtonGroup extension

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

], function (jQuery, RadioButtonGroup) {
    "use strict";

    var CustomRadioButtonGroup = RadioButtonGroup.extend("my.app.controls.RadioButtonGroup", {
        metadata: {
            aggregations: {
                buttons : {type : "my.app.controls.RadioButtonImage", multiple : true, singularName : "button", bindable : "bindable"}
            },
            defaultAggregation : "buttons",
        }
    });

    return CustomRadioButtonGroup;
}, true);

这篇关于将图片添加到单选按钮组中的每个单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！