Question

在我的应用程序中，我有一些交互式小部件，但在从服务器加载数据时，这些小部件必须在加载完成后被停用并再次激活。我不想让小部件隐藏或停用每个字段/按钮。最好的解决方案是一个透明的面板，在加载时在中心或角落加载图像覆盖小部件 - 但是如何实现呢？

Answer 1

以下是一些简单的代码。我已经在某些应用程序中使用过它，但它是使用GWT 2.0，也许它们现在有了更好的东西。您可以使用动画Gif图像替换Label，只需将面板添加到根面板即可。

import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;

public class GlassPanel extends SimplePanel implements NativePreviewHandler {

    private Label text;

    public GlassPanel() {
        setStyleName("glass-panel");
        add(text = new Label());
    }

    public void setText(String text) {
        this.text.setText(text);
    }

    @Override
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        event.consume();
        event.cancel();
    }
}

CSS：

.glass-panel {
    background-color: black;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index: 4000;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

Answer 2

不要忘记添加'mozOpacity'，除了'opacity'和'filter'（或者现在已经过时了？只需加上我的两分钱）

如何使（加载）图像覆盖面板

2 个答案: