单击后更改按钮样式
编辑:如果不清楚,请原谅,我需要一个“瓦丁”解决方案
显然,这应该是非常直观的,但我不能设法使它工作,当一个按钮被点击时,我应该改变它的风格,如果再次点击,返回到原来的风格。我的猜测是:
@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");
}
}
}
使用chrome inspector时,我看到添加了活动类,但按钮消失了。如果我单击按钮所在的位置,我会看到“活动”类被删除(如果再次单击,则会添加…)。仅当我在按钮所在区域外单击时,按钮才会重新出现
你能提供一些见解吗
编辑:我按照建议更正了这里的示例代码(在我的课堂上,它已经按照建议更正了,但是我不知道它有什么不同,所以谢谢!)
页面加载时,按钮具有以下类别:
v-button v-button-thumbs-up-button thumbs-up-button
当我单击时,通过chrome inspector,我可以看到添加了活动的类:
v-button v-button-thumbs-up-button thumbs-up-button v-button-active active
如果我再次单击,它将被删除。显然,onclick代码是正确执行的
有两个问题:
- “活动”样式未应用于按钮,按钮将消失李>
- 如果我在按钮外单击,按钮将重新显示,但样式将恢复为非活动样式。非活动样式工作正常,因此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;
}
我已经找到了样式化的解决方法:活动和聚焦。它正在发挥作用,但没有真正的理由证明它应该发挥作用。它应该像我最初想的那样工作。我认为,通过添加一个类,按钮将以该样式呈现,移除该类,样式将返回到原始样式
我认为问题在于我用组件构建页面的方式,而不是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...
}
}
# 1 楼答案
代码中的问题是,检查并更改按钮“b”中的样式名,而不是按钮“my_special_Button”中的样式名。它必须是这样的:
# 2 楼答案
使用纯javascript执行此操作的简单示例:DEMO
HTML:
CSS:
JS: