<p：commandButton>在每次点击后的颜色变化

我在jsf页面中的代码如下所示，下面的代码是每次点击都弹出，但同时我想为每次点击更改颜色p：commandButton。<p：commandButton>在每次点击后的颜色变化

<h:form id="form"> 

<p:commandButton id="button01" oncomplete="PF('test01').show()" value="sysno_01" icon="button" update=":form01:dialog01" /> 
</h:form> 

    <h:form id="form01"> 
     <p:dialog header="Login" widgetVar="test01" id="dialog01" 
      resizable="true" showEffect="explode" hideEffect="explode"> 

      <p:panelGrid id="display01" columns="2"> 
      <h:outputText value=" First name" /> 
      <h:inputText id="fnme01" value="#{studentLoginBean.studentname}" /> 
      <h:outputText value=" last name" /> 
      <h:inputText id="lnme01" value="#{studentLoginBean.lastname}" /> 
      </p:panelGrid> 
      <h:commandButton actionListener="#{studentLoginBean.login}" value="Login"> 
      <f:param name="action" value="01" /> 
      </h:commandButton> 
      <h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout"> 
       <f:param name="action" value="01" /> 
      </h:commandButton> 
     </p:dialog> 
</h:form>

来源

2015-09-25 Suresh M Gowda

试试这个：把class="changeColor"每个按钮如下图所示

<h:commandButton actionListener="#{studentLoginBean.login}" value="Login" class="changeColor"> 
     <f:param name="action" value="01" /> 
</h:commandButton> 
<h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout" class="changeColor"> 
      <f:param name="action" value="01" /> 
</h:commandButton>

然后在其上注册一个jQuery单击处理并改变其颜色

<script> 
    $(function(){ 
     var colors = ['red','green','blue','pink','yellow','gray','white']; 
     var len = colors.length; 
     var counter = 0; 
     $('.changeColor').click(function(){ 
      $(this).css('background-color', colors[counter]); 
      counter++; 
      //reset counter 
      if(counter==len) 
       counter = 0; 
     }); 
    }); 
</scrip>

来源

2015-09-25 09:10:45

在哪里添加该代码 –

放整个代码（代码为'

<p：commandButton>在每次点击后的颜色变化

回答

相关问题