<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!-- jsf:pagecode language="java" location="/src/pagecode/Test.java" --><!-- /jsf:pagecode -->
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
	  xmlns:f="http://java.sun.com/jsf/core" 
	  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<title>Test sayfası</title>
	<meta http-equiv="Content-Type" 
	      content="application/xhtml+xml; charset=UTF-8" />

	<!-- Bu iki css'i outputStylesheet ile ekleyince head kısmının en üstüne koyuyor. --> 
	<!-- Böyle olunca da tarih alanları dana gibi çıkıyor. Mecburen böyle kullandık. -->
	<link type="text/css" rel="stylesheet" 
	      href="#{request.contextPath}/resources/css/jquery/smoothness-1.10/jquery-ui.css" />
	<link type="text/css" rel="stylesheet" 
	      href="#{request.contextPath}/resources/css/jquery/jquery-ui-timepicker-addon.css" />
	
	<h:outputStylesheet library="css" name="stylesheet.css" />

	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-1.9.1.js" />
	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-ui-1.10.2.custom.min.js" />
	<h:outputScript library="js" name="jquery/localization/jquery.ui.datepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-timepicker-addon.js" />
	<h:outputScript library="js" name="jquery/localization/jquery-ui-timepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-sliderAccess.js" />

	<script type="text/javascript">
	
		$(function() {
		
			function tooltip(content) {
			
				if(content.indexOf(":") &gt;= 0 &amp;&amp; content.indexOf(";") &gt;= 0){
				    var satirlar = content.split(';');
				
			        var htmlTable = "&lt;table border=\"0px\"&gt;&lt;tbody&gt;";
			
			        for (var i = 0; i &lt; satirlar.length; i++) {
			            var satir = satirlar[i];
			            htmlTable += "&lt;tr&gt;";
			                        
			            var kolonlar = satir.split(':');
			            for (var j = 0; j &lt; kolonlar.length; j++) {
			                var kolon = kolonlar[j];
			                
			                if (j==0){ kolon += ":"; }

			                var columnStyle = "";
			
			                if (j == 0) {
			                    columnStyle = "tooltipBaslik";
			                } else {
			                    columnStyle = "tooltipIcerik";
			                }
			
			                htmlTable += "&lt;td class=\&quot;" + columnStyle 
									  + "\&quot;&gt;" + kolon + "&lt;/td&gt;";
			            }
			            htmlTable += "&lt;/tr&gt;";
			
			        }
			
			        htmlTable += "&lt;/tbody&gt;&lt;/table&gt;";
			        //alert(htmlTable);
			        return htmlTable;
				}else{
					return content;
				}
			}
			
			 $(document).tooltip({
			 
				items: "img, [title]",
				
				content: function() {
				
					var element = $(this);
					
					if(element.is("[title]")){
						var title = element.attr("title");
						return tooltip(title);
					} else if (element.is("img")){
						return element.attr("alt");
					}
				},
				
				position : { my: "left top", at: "left bottom"},
				
				//bazı efektler: blind, drop, slide, bounce, clip, explode, 
				//fade, fold, highlight, pulsate, scale, shake, size, 
				show: { effect: "drop", duration: 100 },
				//hide: { effect: "fade", duration: 1000 },
				
				//track : true
			});
		});
	</script>
</h:head>
<h:body>
	<div style="text-align: center;">
		<h:form styleClass="form" id="form1">
			<table border="1" style="width: 100%;">
				<tbody>
					<tr>
						<td><h:dataTable id="kullaniciListe" 
								value="#{pc_Test.kullaniciListesi}" 
								var="kulListe" styleClass="dataTable" 
								headerClass="headerClass" footerClass="footerClass" 
								rowClasses="rowClass1, rowClass2" columnClasses="columnClass1" 
								border="0" cellpadding="2" cellspacing="0" width="100%">
								<h:column id="montTarihi1column">
									<f:facet name="header">
										<h:outputText value="Montaj Tarihi" 
													  id="montTarihi1text"></h:outputText>
									</f:facet>
									<h:outputText styleClass="outputText" id="montTarihi1" 
										value="#kulListe.montTarihi}"
										title="Montajlayan kullanıcı 1:#{kulListe.montKullanici1};
											   Montajlayan kullanıcı 2:#{kulListe.montKullanici2};
											   Montajlayan kullanıcı 3:#{kulListe.montKullanici3};
											   Montajlayan kullanıcı 4:#{kulListe.montKullanici4}">
										<f:convertDateTime locale="tr" type="both" dateStyle="short"/>
									</h:outputText>
								</h:column>
							</h:dataTable>
						</td>
					</tr>
				</tbody>
			</table>
		</h:form>
	</div>
</h:body>
</html>