Question

我想知道是否以及如何使用SmartGWT在运行时更改与元素关联的类。

举例说明在div中呈现内容的底层代码，我想知道是否以及如何在运行时修改与div关联的css类。

    HTMLFlow productInfo = new HTMLFlow(productInfoHtml);
    productInfo.setStyleName("loginProductInfo");
    productInfo.setHeight(13);
    productInfo.setMargin(5);

注意：我正在使用Smart GWT 4.0版

Answer 1

我没有使用过SmartGWT，但如果HTMLFlow是一个小部件，你可以使用GQuery来改变飞行或css规则上的类。

类似的东西：

if (something) {
  GQuery.$(productInfo).css("width", "70px");
else{
  GQuery.$(productInfo).css("width", "30px");
}

关于css类：

if (something) {
  GQuery.$(loginProductInfo).removeClass("loginProductInfo");
} else {
  GQuery.$(loginProductInfo).addClass("secondLoginProductInfoCss");
}

Answer 2

事实上，解决方案比我想象的要简单。保持对要更改css类的对象的引用就足够了，然后再次调用方法setStyleName。保持对窗口小部件（在我们的示例中为productInfo）的引用作为原始类的字段，然后在必要时更改css分配。

所以最后，对象productInfo成为主类中的一个字段，然后我们可以通过再次调用传递新css类的方法setStyleName来改变css赋值。

对象productInfo成为主类

中的字段

protected HTMLFlow productInfo = new HTMLFlow();

问题示例的代码在代码段

中进行了修改

    productInfo.setContents(productInfoHtml);
    productInfo.setStyleName("login-product-info");
    productInfo.setHeight(16);
    productInfo.setWidth100();

现在，当忘记了对象上发生onMouseOver事件时，我可以更改分配给小部件productInfo的css类。

    forgot.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            productInfo.setStyleName("my-new-style");
        }
    });

SmartGWT在运行时切换CSS类

2 个答案: