0

我有以下代码来显示图像

<ui:repeat id="repeat5" value="#{getData.imageThumbnail1}" var="imagesLst2" varStatus="loop">
    <h:panelGroup>
        <p:commandLink id="cl3" action="#{getData.imageID(imagesLst2.imageID)}" styleClass="ovr" update=":mainForm:tabView:example">
            <p:graphicImage id="gi3" value="#{imagesStreamer.image}" styleClass="bord" alt="image not available3"  width="60" height="60" >
                <f:param name="id5" value="#{imagesLst2.imageID}" />
            </p:graphicImage>
        </p:commandLink>
    </h:panelGroup>
</ui:repeat>

我有一个 css 文件来显示 p:graphicImage .bord {border-style:solid; 的边框。边框宽度：2px；边框颜色：#00FFFF；}

我可以查看多个图像，当我选择一个图像时，它需要更改该图形图像的边框颜色（在任何时候只有一个选定的图像），我如何在 PrimeFaces 中做到这一点我尝试使用 javascript 但是无法弄清楚如何更改现有组件的边框。

更新：1

我使用以下代码完成了上述任务

 <p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3"  width="60" height="60" >

和 javascript

function mouseDown(element) {
    var element1 = (element);
    element1.style.borderColor="#ff0000";
}

现在我的问题是如何在新选择上更改先前选择的边框颜色。

4

2 回答 2

0

我认为这是一个更清洁的解决方案，您不必使用全局变量。

在 ui:repeat 周围添加一个。然后简单地用jquery解决。

标记：

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" alt="image not available3"  width="60" height="60" onclick="setBorder(this)">

javascript:

function setBorder(element) {
    $('#imageContainer .bord').removeClass('bord'); // Removes the border from all images that has it.
    $(element).addClass('bord'); // Adds the border class to the clicked image.
}
于 2012-06-25T11:00:59.680 回答
0

这就是我做上述事情的方式

jsf代码

<p:graphicImage id="gi3" value="#{imagesStreamer.image}" onmousedown="mouseDown(this)" styleClass="bord" alt="image not available3"  width="60" height="60" >

javascript

var elementOld;

function mouseDown(element) {
    var element1 = (element);
    element1.style.borderColor="#ff0000";

    if(elementOld != null){
        elementOld.style.borderColor="#739E39"
    }
    elementOld = element1;
}

感谢 BalusC 的回复 How to reference a JSF component Id in jquery?

于 2012-06-25T10:50:26.577 回答