<?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(":") >= 0 && content.indexOf(";") >= 0){
var satirlar = content.split(';');
var htmlTable = "<table border=\"0px\"><tbody>";
for (var i = 0; i < satirlar.length; i++) {
var satir = satirlar[i];
htmlTable += "<tr>";
var kolonlar = satir.split(':');
for (var j = 0; j < kolonlar.length; j++) {
var kolon = kolonlar[j];
if (j==0){ kolon += ":"; }
var columnStyle = "";
if (j == 0) {
columnStyle = "tooltipBaslik";
} else {
columnStyle = "tooltipIcerik";
}
htmlTable += "<td class=\"" + columnStyle
+ "\">" + kolon + "</td>";
}
htmlTable += "</tr>";
}
htmlTable += "</tbody></table>";
//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>