Question

目前我有一个TabLayoutPanel，其中我的UiBinder for Panel的标签中有一个图像URL。使用UiBinder选择选项卡后，是否有一种方法可以换出图像？如果没有，我将如何在CSS中执行此操作？这有可能吗？

感谢。

<g:TabLayoutPanel ui:field="homePanel" barUnit='PX' barHeight='100'>
        <g:tab>
        <g:header> 
            <img src = "images/sprites_01.png"></img> 
        </g:header>
        <g:Label>Hello, world!</g:Label>
        </g:tab>
        <!-- First Tab -->
        <g:tab>
        <g:header>
            <img src = "images/sprites_02_notselected.png"></img>
        </g:header>
            <my:FirstTabWidget ui:field="TabWidgetOne">    </my:FirstTabWidget>
        </g:tab>

等...

Answer 1

在您的.ui.xml文件中，在您的img元素中添加ui:field属性：

<g:HTMLPanel>
    <g:TabLayoutPanel ui:field="homePanel" barUnit='PX' barHeight='100'>
        <g:tab>
            <g:header> 
                <img ui:field="tab1Img" src = "images/sprites_01.png"></img> 
            </g:header>
            <g:HTML>My first tab</g:HTML>
        </g:tab>
        <g:tab>
            <g:header>
                <img ui:field="tab2Img" src = "images/sprites_02_notselected.png"></img>
            </g:header>
            <g:HTML>My second tab</g:HTML>
        </g:tab>
    </g:TabLayoutPanel>
</g:HTMLPanel>

并在您的代码中访问这些元素：

@UiField ImageElement tab1Img;
@UiField ImageElement tab2Img;

在TabLayoutPanel中添加SelectionHandler，并根据需要交换图像src属性：

homePanel.addSelectionHandler(new SelectionHandler<Integer>(){
    public void onSelection(SelectionEvent<Integer> evt){
        //change the img source here:
        tab1Img.setSrc("myOtherImage1.png");
        tab2Img.setSrc("myOtherImage2.png");
    }
});

如何更改TabLayoutPanel中Tab中的图像？

1 个答案: