如何使用jsf使用漂亮的照片（jQuery图库插件）？

我正在尝试将prettyPhoto jquery plugin与jsf整合，但不知道如何调用prettyphoto函数。当文档加载时，我想在用户碰到图像时显示照片库。我写了这样的代码：如何使用jsf使用漂亮的照片（jQuery图库插件）？

<script src="/iHome-war/js/jquery.js" type="text/javascript" charset="utf-8"></script> 
<link rel="stylesheet" href="/iHome-war/styles/prettyPhoto.css" type="text/css" media="screen" 
charset="utf-8" /> 
<script src="/iHome-war/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 
... 
<h:form id="soForm"> 
<div class="articleContent"> 
<div class="galleryPhoto"> 
<h:commandLink action="/userimages/22/0.jpg" rel="prettyPhoto"> 
<h:graphicImage url="/userimages/22/0.jpg" width="120" height="90" alt="photo"/> 
</h:commandLink></div></div></h:form> 
... 
<script type="text/javascript" charset="utf-8"> 
$(document).ready(function(){ 
$("#soForm\\:commandLink[rel^='prettyPhoto']").prettyPhoto();}); 
</script>

但它没有工作。所以问题是如何调用这个函数来使它工作？我知道JSF名称由两个元素formid：componentid组成，但是如何使用这些信息？感谢您的回复。

来源

2010-11-22 problemgenerator

提示：编写JavaScript/jQuery的时候，做不看JSF源代码，而是查看其生成的HTML输出（仅仅因为这就是JS可以访问的全部内容）。在浏览器中右键单击页面，然后选择*查看源代码*以查看它。 – BalusC 2010-11-22 18:10:38

那么问题是，“commandLink”结构是一个服务器端的东西，将在客户端运行Javascript代码时消失。因此，您需要更改选择：

$("#soForm *[rel^='prettyPhoto']").prettyPhoto();

我不知道什么是“commandLink”生成的页面上，但如果你发现它是一个<a>标签，你可以替换“*”，由“A”。

来源

2010-11-22 18:01:32 Pointy

这是一个``元素。所以，绝对使用`a`。 – BalusC 2010-11-22 18:09:30

JSF有一个forceId属性，你可以用它来强迫你要运行该功能的元素的ID，你这样做之后，你的选择变得

jQuery("#THE_ID").prettyPhoto()

来源

2010-11-22 18:01:43 mkoryak

如何使用jsf使用漂亮的照片（jQuery图库插件）？

回答

相关问题