<?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>