如何在JSF 2.0中使用jQuery [英] How to use jQuery with JSF 2.0
问题描述
我正在学习jQuery.我想在我的jsf 2.0应用程序中使用jQuery.就像我有html文件一样，我在其中使用jQuery
I am learning jQuery. I want to use jQuery inside my jsf 2.0 application. Like i have html file, in which i am using jQuery like this
<head>
<title>The Devil's Dictionary</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/06.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/06.js"></script>
</head>
我只是从jQuery官方网站下载了jquery-1.7.1.js文件，将其包含在我的目录中，然后开始使用jQuery.
I simply downloaded the jquery-1.7.1.js file form jQuery official website, included it into my directory and then start using jQuery.
我的06.js文件类似这样的代码
My 06.js file conatin code like this
$(document).ready(function() {
$('#letter-a a').click(function(){
/**
* The .load() method does all our heavy lifting for us! We specify the target location for
* the HTML snippet by using a normal jQuery selector, and then pass the URL of the file to
* be loaded as a parameter to the method. Now, when the first link is clicked, the file is
* loaded and placed inside <div id="dictionary">. The browser will render the new HTML as
* soon as it is inserted,
*/
$('#dictionary').load('a.html');
return false;
}); //end of $('#letter-a a').click()
/**
* Occasionally, we don't want to retrieve all the JavaScript we will need when the page is
* first loaded. We might not know what scripts will be necessary until some user interaction
* occurs. We could introduce <script> tags on the fly when they are needed, but a more elegant
* way to inject additional code is to have jQuery load the .js file directly.
*
* Pulling in a script is about as simple as loading an HTML fragment. In this case we use
* the $.getScript() function, which, like its siblings, accepts a URL locating the script
* file, as shown in the following code snippet:
*/
$('#letter-c a').click(function(){
$.getScript('js/c.js');
return false;
}); //end of $('#letter-c a').click(function())
}); //end of $(document).ready(fn)
这是我的html文件代码段
Here is my html file code snippet
<html>
<head>
<title>The Devil's Dictionary</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/06.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/06.js"></script>
</head>
<body>
<div id="container">
<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="#">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="#">C</a></h3>
</div>
</div>
<div id="dictionary">
</div>
</div>
</body>
我想问一下我是否在JSF2.0上创建相同的页面，然后jQuery将以相同的方式工作，还是我不得不放弃一些插件才能在我的JSF 2.0应用程序中使用jQuery?或修改我的web.xml中的内容?
I want to ask if i create the same page on JSF2.0, then jQuery will work in the same way or i have to downlaod some plugin to use jQuery inside my JSF 2.0 application? or to modify something inside my web.xml ?
谢谢
推荐答案
它的工作方式相同.
JSF将表单的ID附加到表单内的所有输入字段.因此，您需要小心使用jQuery选择器.例如，假设您具有以下形式:
JSF appends the form's ID to all input fields inside the form. Hence, you need to be careful with your jQuery selectors. For example, suppose you have the following form:
<h:form id="myForm">
<h:inputText id="myInput" />
</h:form>
使用jQuery，您必须将输入引用为:$("#myForm\\:myInput")
Using jQuery, you have to refer to the input as: $("#myForm\\:myInput")
某些框架(例如PrimeFaces)使用的组件如果通过以下方式导入jQuery，则可能无法使用或失去外观:
Some frameworks such as PrimeFaces, use components that may not work or may lost their skinning if you import your jQuery with:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
相反，您应该通过导入为以下方式使用其内置的jQuery库:
Instead, you should use their built-in jQuery library by importing as:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
但是，此jQuery库包含在冲突模式下，这意味着您无法使用$().因此，您可能需要以下附加设置:
This jQuery library is, however, included in conflict mode which means you cannot use $(). Hence, you may need this additional setting:
<h:outputScript target="head">
$ = jQuery;
// Then you can use it
$(document).ready(function() {
...
});
</h:outputScript>
这篇关于如何在JSF 2.0中使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
