Problem with <rich:jQuery> and Zebra-Style-Columns
damienmc3 Nov 18, 2009 12:29 PMHello all !
I have the following xhtml-page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:webshop="http://webshop.de" xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j" template="/resources/layout/template.xhtml"> <ui:define name="title"> <h:outputText value="#{msg['index.title']}"/> </ui:define> <ui:define name="contents"> <h1><h:outputText value="#{msg['index.welcome']}"/></h1> <h:form id="modeNewsTable"> <rich:tabPanel id="indexrss" switchType="ajax" style="width: 55%;"> <rich:tab id="mode"> <f:facet name="label"> <h:outputText value="Outfits, Mode, Trends, Stars und Designer" /> </f:facet> <rich:dataTable id="modeTabelle" var="news" value="#{news.newsmode}" cellspacing="10" cellpadding="10" reRender="datascrollermode"> <f:facet name="header"> Neues aus der Modewelt </f:facet> <rich:column id="idSpalte"> <f:facet name="header"> Titel </f:facet> <h:outputLink value="#{news[2]}" target="_blank"> <h:outputText value="#{news[0]}" /> </h:outputLink> </rich:column> <rich:column id="bezeichnungSpalte"> <f:facet name="header"> Beschreibung </f:facet> <f:facet name="header"> <h:outputText value="Beschreibung" /> </f:facet> <h:outputText value="#{news[1]}" /> </rich:column> <f:facet name="footer"> <rich:datascroller id="datascrollermode" maxPages="10" /> </f:facet> </rich:dataTable> <rich:jQuery selector="#modeTabelle tr:odd" query="addClass('odd-row')" /> <rich:jQuery selector="#modeTabelle tr:even" query="addClass('even-row')" /> <rich:jQuery selector="#modeTabelle tr" query="mouseover(function(){jQuery(this).addClass('active-row')})"/> <rich:jQuery selector="#modeTabelle tr" query="mouseout(function(){jQuery(this).removeClass('active-row')})"/> </rich:tab> <rich:tab id="beauty"> <f:facet name="label"> <h:outputText value="Looks, Pflege und Make-up, Haare und Styling, Wellness und Body"/> </f:facet> <rich:dataTable id="beautyTabelle" var="news" value="#{news.newsbeauty}" cellspacing="10" cellpadding="10" reRender="datascrollerbeauty"> <f:facet name="header"> Neues aus der Beautywelt </f:facet> <rich:column id="idSpalte"> <f:facet name="header"> Titel </f:facet> <h:outputLink value="#{news[2]}" target="_blank"> <h:outputText value="#{news[0]}" /> </h:outputLink> </rich:column> <rich:column id="bezeichnungSpalte"> <f:facet name="header"> Beschreibung </f:facet> <f:facet name="header"> <h:outputText value="Beschreibung" /> </f:facet> <h:outputText value="#{news[1]}" /> </rich:column> <f:facet name="footer"> <rich:datascroller id="datascrollerbeauty" maxPages="10" /> </f:facet> </rich:dataTable> </rich:tab> </rich:tabPanel> </h:form> </ui:define> </ui:composition>
in the css-file I have defined the following classes:
.odd-row { background-color: MediumSpringGreen; color: White } .even-row { background-color: #FCFFFE; } .active-row { background-color: MediumTurquoise; }
The problem is, that there is no zebra-style-effect ! i'm using the latest richfaces and mojarra 1.2.
Thanks in advance for any hint !