<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<f:subview id="jQuerySubviewID">
<style>
.divSize_1 {
	width: 150px;
	height: 90px;
	margin: 10px;
	border: 2px solid #DAA520;
}

.divColor_1 {

	background-color: #1E90FF; 
}

.divTextSize_1 {
	font-size: xx-large;
}
.divSize_2 {
	width: 90px;
	height: 150px;
	margin: 10px;
	border: 2px solid #FF0000;
}

.divColor_2 {
	background-color: #7FFF00; 
}

.oddTable{
	background-color: #FFE4C4;
}
.activeTable{
	background-color: #AFEEEE;
}
.fontColor {
	font-style: italic;
	color: #228B22;
}
</style>
	<h:panelGrid id="panelGridID" columns="2" border="1">
		<h:outputText value="add text: [li],work!, e.g. A. one [li],work!" />
		<h:panelGroup>
			<f:verbatim>
			<ol type="A" title="li">
				<li>one </li>
				<li>two </li>
				<li>three</li>
			</ol>
			</f:verbatim>
		</h:panelGroup>
		
		<h:outputText value="green text: add text3 " />
		<f:verbatim> <p><span>Text1 </span>text2</p> </f:verbatim>
		
		<h:panelGroup> 
			<h:outputText value="Rectangle: size: &#34;150 x 90&#34;; bgcolor: &#34;dodgerblue&#34;" />
			<f:verbatim><br /></f:verbatim>
			<h:outputText value="Table: bgcolor: &#34;bisque&#34;" />
		</h:panelGroup>
		<f:verbatim><div id="div_1_ID">xx-large <br /> text </div></f:verbatim>
		
		<h:panelGroup>
			<h:outputText value="Rectangle: size: &#34;90 x 150&#34;; border-color &#34;red&#34;" />
			<f:verbatim><br /></f:verbatim>
			<h:outputText value="Table: bgcolor: &#34;none&#34;" />
			<f:verbatim><br /></f:verbatim>
			<h:outputText value="effect(mouseover)" />
		</h:panelGroup>
		<f:verbatim><div id="div_2_ID"> normal text</div></f:verbatim>
		</h:panelGrid>


        <rich:jQuery selector="li" timing="onload" query="find('ol').end().append('[li],work!')" />
     	
		<rich:jQuery selector="body" timing="onload" query="addClass('body')"/>
		<rich:jQuery selector="tr:nth-child(odd)" timing="onload" query="addClass('oddTable')" />
		<rich:jQuery selector="#panelGridID tr" query="mouseover(function(){jQuery(this).addClass('activeTable')})"/>
        <rich:jQuery selector="#panelGridID tr" query="mouseout(function(){jQuery(this).removeClass('activeTable')})"/>
        
        <rich:jQuery selector="#div_2_ID" timing="onload" query="mouseover(function(){jQuery(this).fadeOut({height: 'hide'}, 500).text('New text').animate({height: 'show'}, 500)})" />
        <rich:jQuery selector="p" timing="onload" query="find('span').html('text1').end().append('&lt;p class=\'fontColor\'&gt;add text3&lt;p&gt;')"/> 
		<rich:jQuery selector="#div_1_ID" timing="onload" query="addClass('divSize_1')" />
		<rich:jQuery selector=".divSize_1" timing="onload" query="addClass('divColor_1')" />
		<rich:jQuery selector="#panelGridID #div_1_ID" timing="onload" query="addClass('divTextSize_1')" />
		<rich:jQuery selector="#form\\:panelGridID #div_2_ID" timing="onload" query="addClass('divSize_2')" />
</f:subview>