Skip to content

Instantly share code, notes, and snippets.

@mucar

mucar/jsf2_jquery_tooltip_sample.xhtml

Created April 1, 2013 11:42
Show Gist options
  • Save mucar/5284501 to your computer and use it in GitHub Desktop.
Save mucar/5284501 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery tooltip sample with JSF2.0 in Rational Software Architect 8.5
Raw
jsf2_jquery_tooltip_sample.xhtml
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment