首页 文章

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

提问于
浏览 次
10

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

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

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

enter image description here

sapui5

1 回答

  • 3

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

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

    Assumptions ：

    • 命名空间在 index.html 文件中定义为 my.app

    • 在项目文件夹（webapp或WebContents）中，您已为这些自定义控件创建了一个文件夹，名为 controls

    RadioButton扩展

    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扩展

    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);
    回复于

相关问题