Question

我想让JQuery在JSF中工作，但我没有成功。脚本位于文件夹resources中。我正在使用NetBeans。

这是我的JSP代码：

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

有人拥有JavaScript的现实生活示例吗？

Answer 1

AWW MAN ..我有一点错字：/

        <webuijsf:script id="script1" url="resources/jquery.js"/>
        <webuijsf:script id="script2" url="recources/main.js" />

它是reSources / main.js“＆lt; - 就在那里。

：/

Answer 2

jQuery适用于JSF，确保您正确使用它。从jQuery网站（Using jQuery with other Libraries），您需要确保使用jQuery.noConflict（）或jQuery（...）而不是$（...）。

例如，您可以使用以下命令确保jQuery不与其他库冲突。

var $J = jQuery.noConflict();

$J(<selector>)...

如果您使用的是RichFaces，您还可以查看它对jQuery的支持。

Answer 3

我不确定$ J = jQuery.noConflict（）;

的最佳解决方案

由于，我编写了使用jQuery打印textarea内容的代码。我也在我的jsp页面中使用了rich：dataScroller标签..

出现两种情况：

一，打印工作，但丰富：dataScroller不起作用（不使用 jQuery.noConflict（））

第二，打印不起作用，富：dataScroller工作（使用 jQuery.noConflict（））

https://stackoverflow.com/questions/2902374/how-to-integrate-jquery-with-jsf-richfaces-tags-for-print-the-image-and-textarea

JSF和JQuery - 不起作用

3 个答案: