JSF更改css样式属性onclick

时间:2014-12-15 21:33:56

标签: css jsf onclick managed-bean

要清楚,我有一个具有某种风格的div,当我点击这个div中的commandButton时,我想将display属性设置为“none”。

我希望通过单击commandButton来改变css样式。

所以这是我的xhtml:

<div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
                <h:commandButton image="resources/images/close Icon.png" 
                                 action="#{detailsPopUpManager.closePopUp()}" 
                                 class="closeIcon"/>
</div>

这是detailsPopUpManager代码:

 @Named(value = "detailsPopUpManager")

 @SessionScoped

 public class DetailsPopUpManager implements Serializable {

    private String style;
    public DetailsPopUpManager() {
        style = "width:500px;\n" +
                "height:500px;\n" +
                "background: graytext;\n" +
                "position: absolute;\n" +
                "right: 25%;\n" +
                "top: 10px;\n" +
                "z-index: 1;";
    }

    public String getStyle() {
        return style;
    }

    public void setStyle(String style) {
        this.style = style;
    } 

    public void closePopUp()
    {
        style = "width:500px;\n" +
                "height:500px;\n" +
                "background: graytext;\n" +
                "position: absolute;\n" +
                "right: 25%;\n" +
                "top: 10px;\n" +
                "z-index: 1;\n" +
                "display: none;";
    }

感谢您的进一步帮助。

1 个答案:

答案 0 :(得分:1)

您需要使用ajax来实现该结果。

<h:form id="myForm">
   <div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
                <h:commandButton image="resources/images/close Icon.png" 
                                 action="#{detailsPopUpManager.closePopUp()}" 
                                 class="closeIcon">
                   <f:ajax render="myForm"/>
                </h:commandButton>

   </div>
</h:form>