- 首页
- 其他开发
- 如何在 JSF 2.0 中使用 jQuery
如何在 JSF 2.0 中使用 jQuery
[英] How to use jQuery with JSF 2.0
本文介绍了如何在 JSF 2.0 中使用 jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习 jQuery.我想在我的 jsf 2.0 应用程序中使用 jQuery.就像我有 html 文件一样，我在其中使用 jQuery
<title>恶魔辞典</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>
我只是从 jQuery 官方网站下载了 jquery-1.7.1.js 文件，将其包含在我的目录中，然后开始使用 jQuery.
我的 06.js 文件包含这样的代码
$(document).ready(function() {$('#letter-a a').click(function(){/*** .load() 方法为我们完成了所有繁重的工作！我们指定目标位置* 使用普通的 jQuery 选择器生成 HTML 片段，然后将文件的 URL 传递给* 作为方法的参数加载.现在，当点击第一个链接时，文件是* 加载并放置在 中.浏览器会将新的 HTML 呈现为* 一旦插入，*/$('#dictionary').load('a.html');返回假；});//$('#letter-a a').click() 结束/*** 有时，我们不想检索页面出现时所需的所有 JavaScript* 第一次加载.在某些用户交互之前，我们可能不知道需要哪些脚本* 发生.我们可以引入<script>需要时即时标记，但更优雅* 注入额外代码的方法是让 jQuery 直接加载 .js 文件.** 拉入一个脚本就像加载一个 HTML 片段一样简单.在这种情况下，我们使用* $.getScript() 函数，与它的兄弟函数一样，接受定位脚本的 URL* 文件，如以下代码片段所示:*/$('#letter-c a').click(function(){$.getScript('js/c.js');返回假；});//$('#letter-c a').click(function()) 结束});//$(document).ready(fn) 结束
这是我的 html 文件代码片段
<头><title>恶魔辞典</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><身体><div id="容器"><div class="字母"><div class="letter" id="letter-a"><h3><a href="#">A</a></h3>
<div class="letter" id="letter-b"><h3><a href="#">B</a></h3>
<div class="letter" id="letter-c"><h3><a href="#">C</a></h3>
<div id="字典">
我想问一下我是否在 JSF2.0 上创建了相同的页面，然后 jQuery 会以相同的方式工作，或者我必须下载一些插件才能在我的 JSF 2.0 应用程序中使用 jQuery?或者修改我的 web.xml 里面的东西?
谢谢
解决方案
工作原理相同.
ID 属性
JSF 将表单的 ID 附加到表单内的所有输入字段.因此，您需要小心使用 jQuery 选择器.例如，假设您有以下表单:
<h:inputText id="myInput"/></h:form>
使用 jQuery，您必须将输入引用为:$("#myForm\:myInput")
框架
某些框架(例如 PrimeFaces)使用的组件在您导入 jQuery 时可能无法正常工作或丢失外观:
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
相反，您应该通过导入为使用他们的内置 jQuery 库:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
然而，这个 jQuery 库包含在冲突模式中，这意味着您不能使用 $().因此，您可能需要此附加设置:
$ = jQuery;//然后就可以使用了$(document).ready(function() {...});</h:outputScript>
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>
I simply downloaded the jquery-1.7.1.js file form jQuery official website, included it into my directory and then start using jQuery.
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)
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>
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 ?
Thanks
解决方案
It works the same way.
ID Attributes
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>
Using jQuery, you have to refer to the input as: $("#myForm\:myInput")
Frameworks
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>
Instead, you should use their built-in jQuery library by importing as:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
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屋！
