[英]color change of <p:commandButton> after every onclick
我在jsf页面中的代码如下所示,下面的代码使我每次点击都会弹出,但同时我想为每次点击更改颜色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>
试试这个:为每个按钮放置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 Click处理程序并更改其颜色
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.