1

編集：明確でない場合はご容赦ください。「Vaadin」ソリューションが必要です

どうやらこれは非常に直感的なはずですが、うまく機能させることができません。ボタンをクリックするとスタイルを変更し、もう一度クリックするとスタイルを元に戻す必要があります。私の推測は次のとおりです。

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == my_special_button){            
        if(!b.getStyleName().contains("x")){
            b.addStyleName("x");                
        } else {
            b.removeStyleName("x");
        }       
    }
}

クロムインスペクターを使用すると、アクティブなクラスが追加されているのがわかりますが、ボタンが消えます。ボタンがあった位置をクリックすると、「アクティブな」クラスが削除されていることがわかります（もう一度クリックすると追加されます..）。ボタンがあった領域の外側をクリックした場合にのみ、ボタンが再表示されます。

洞察を提供していただけますか？

編集: 提案されているように、ここのコード例を修正します (私のクラスでは、すでに提案されていましたが、違いがあるとは知りませんでした。ありがとう!)

ページが読み込まれると、ボタンには次のクラスがあります。

v-button v-button-thumbs-up-button thumbs-up-button

クリックすると、chrome インスペクタでアクティブなクラスが追加されていることがわかります。

v-button v-button-thumbs-up-button thumbs-up-button v-button-active active

もう一度クリックすると、削除されます。したがって、明らかに onclick コードは正しく実行されます。

2 つの問題があります。

  1. 「アクティブ」スタイルがボタンに適用されず、ボタンが消えます!
  2. ボタンの外側をクリックすると、ボタンは再び表示されますが、スタイルはアクティブでないものに戻ります。非アクティブ スタイルは正常に機能するため、css はページによって読み込まれます。

さらに参考までに、これは私が使用しているcssです：

.thumbs-up-button{
background-image: url("../covercliptheme/img/thumbs_up_1x.png");
background-position: left top;  
}

.thumbs-up-button .v-button-active .active{ 
background-image: url("../covercliptheme/img/thumbs_up_1x_green.png");
background-position: left top;
}

スタイリング :active と :focus の回避策も見つけました。それは機能していますが、そうすべき本当の理由はありません。クラスを追加することで、ボタンがそのスタイルでレンダリングされ、クラスを削除すると、スタイルが元のスタイルに戻ります。

問題は、onClickアクション自体ではなく、コンポーネントを使用してページを作成した方法にあると思います..何がうまくいかないのかを知りたいと思っています:)ボタンはコンポーネントの一部です。他のコンポーネントの一部、特にボタンのあるコンポーネントは、次のクラスで表されます。

public class CVRow extends CustomComponent implements Button.ClickListener{

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private HorizontalLayout horizontalLayout_1;
@AutoGenerated
private AbsoluteLayout absoluteLayout_2;
@AutoGenerated
private Button nativeButton_2;
@AutoGenerated
private Button nativeButton_1;

/**
 * The constructor 
 */
public CVRow() {
    buildMainLayout();
    setCompositionRoot(mainLayout);


    nativeButton_1.addListener(this);
    // TODO add user code here
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
    /* some layout code.. */

    // add horizontalLayout_1
    horizontalLayout_1 = buildHorizontalLayout_1();
    mainLayout.addComponent(horizontalLayout_1, "top:0.0px;left:0.0px;");

    return mainLayout;
}

@AutoGenerated
private HorizontalLayout buildHorizontalLayout_1() {
    // some layout code... //


    // add absoluteLayout_2 <-- buttons will be here
    absoluteLayout_2 = buildAbsoluteLayout_2();
    horizontalLayout_1.addComponent(absoluteLayout_2);

    return horizontalLayout_1;
}

@AutoGenerated
private AbsoluteLayout buildAbsoluteLayout_2() {
    // common part: create layout
    absoluteLayout_2 = new AbsoluteLayout();
    absoluteLayout_2.setImmediate(false);
    absoluteLayout_2.setWidth("60px");
    absoluteLayout_2.setHeight("60px");
    absoluteLayout_2.setMargin(false);

            //BUTTONS are here:
    // nativeButton_1
    nativeButton_1 = new Button();
    nativeButton_1.setImmediate(true);
    nativeButton_1.setWidth("20px");
    nativeButton_1.setHeight("20px");
    nativeButton_1.setStyleName("thumbs-up-button");
    absoluteLayout_2.addComponent(nativeButton_1, "top:41.0px;left:0.0px;");

    // nativeButton_2
    nativeButton_2 = new Button();
    nativeButton_2.setStyleName("thumbs-down-button");
    nativeButton_2.setImmediate(true);
    nativeButton_2.setWidth("20px");
    nativeButton_2.setHeight("20px");
    absoluteLayout_2.addComponent(nativeButton_2, "top:41.0px;left:40.0px;");

    return absoluteLayout_2;
}

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == nativeButton_1){

        if(nativeButton_1.getStyleName().contains("active"))
            nativeButton_1.removeStyleName("active");
        else
            nativeButton_1.addStyleName("active");
    }

            //etc...

}

}
4

2 に答える 2

0

コードの問題は、ボタン「my_special_button」ではなく、ボタン「b」からスタイル名を確認して変更することです。次のようにする必要があります。

@Override
public void buttonClick(ClickEvent event) {
    Button b = event.getButton();

    if (b == my_special_button){            
        if(!my_special_button.getStyleName().contains("x")){
            my_special_button.addStyleName("x");                
        } else {
            my_special_button.removeStyleName("x");
        }       
    }
}
于 2013-08-17T14:01:21.110 に答える
-1

純粋な JavaScript を使用した簡単な例: DEMO

HTML:

<button id="toggleButton">
    Toggle Class
</button>

CSS:

button{
    font-size:10px;
}

.active{
    font-size:15px;
}

JS:

var btn = document.getElementById('toggleButton');
btn.addEventListener('click', function(event){
    if(this.classList.contains('active')){
        this.classList.remove('active');
    }
    else{
        this.classList.add('active');
    }
});
于 2013-08-17T02:16:17.050 に答える