JSF and Jquery - doesn't work
- by darkrain
Hi
I am trying to get Jquery work in JSF.
But i doesn't work.
Can somebody help me ?
The scripts are in the folder : resources
This is my JSP code :
I am using netbeans and the
<?xml version="1.0" encoding="UTF-8"?>
<!--
Document : testpage
Created on : 08.07.2009, 01:16:01
Author : reBourne
-->
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<webuijsf:page id="page1">
<webuijsf:html id="html1">
<webuijsf:head id="head1">
<webuijsf:link id="link1" url="/resources/css/stylesheet.css"/>
<webuijsf:script id="script1" url="resources/jquery.js"/>
<webuijsf:script id="script2" url="recources/main.js" />
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</webuijsf:head>
<webuijsf:body id="body1" style="-rave-layout: grid">
<webuijsf:form id="form1">
<ul>
<li>
<a class="preview" href="resources/images/1.jpg">
<img alt="gallery thumbnail" src="resources/images/1s.jpg"/>
</a>
</li>
<li>
<a class="preview" href="resources/images/2.jpg">
<img alt="gallery thumbnail" src="resources/images/2s.jpg"/>
</a>
</li>
<li>
<a class="preview" href="resources/images/3.jpg">
<img alt="gallery thumbnail" src="resources/images/3s.jpg"/>
</a>
</li>
<li>
<a class="preview" href="resources/images/4.jpg">
<img alt="gallery thumbnail" src="resources/images/4s.jpg"/>
</a>
</li>
</ul>
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>
</webuijsf:page>
</f:view>
</jsp:root>
Or has someone a real life example with Javascript ?!
