javascript - 如何在Primefaces中覆盖ContentFlow配置

我想覆盖onclickActiveItem函数，并且需要检索当前活动项目索引或在Primefaces中使用onMakeActive调用某些内容，最佳方法是什么？

我可以通过以下方式调用函数：

<p:contentFlow value="#{imagesView.images}" var="image" widgetVar="img">
            <p:graphicImage value="/images/imgs/img#{image}.jpg" styleClass="content" onclick="select(#{image})" />
        </p:contentFlow>

然后在javascript中：

function setImageIndex(i){
        return;
    }
function select(i) {
        ContentFlowGlobal.Flows[0].setConfig({onclickActiveItem:setImageIndex});
    }

但是如果我这样尝试：
ContentFlowGlobal.Flows[0].setConfig({onclickActiveItem:setImageIndex(i)});
它可以工作，但是有许多控制台错误记录，例如“ onclickActiveItem不是函数”！

因此，通过这种方式，我删除了打开图像本身的默认操作，并且可以使用onclick进行调用，我希望有更好的方法来覆盖ContentFlow js，但我仍然认为我做错了。

任何想法有什么正确的方法来覆盖Primeface中的ContentFlow javascript配置吗？

最佳答案

ContentFlow是一个纯jQuery插件，PrimeFaces将其视为这样，没有为widget添加任何额外的样式，
因此，您可以使用普通的jQuery实现此目的，而无需使事情复杂化，甚至无需深入研究插件的事件。

例如，您可以使用onclick，如果该项目通常为click，则它是活动的：

$(document).on('click', '.flow .item', function(){
   var imageIndex = $(this).index();// the image index
   $(this).find('canvas').attr('src');// the image src
   // then you could call a remoteCommand from here passing the index
})

编辑：如果已选择要防止打开图像，可以采用此方法...

<p:contentFlow value="#{mainBean.batImages}" var="image">
   <p:graphicImage name="images/list/#{image}" styleClass="content" onclick="clickFlow(this, event)" />
 </p:contentFlow>

现在，JavaScript非常简单：

function clickFlow(item ,e) {
   //prevents image opening...
   if ($(item).parent().hasClass('active')) {
      e.stopImmediatePropagation();
   }
}

基本上，您检查用户是否单击了活动图像，如果是，则调用stopImmediatePropagation（），它使其余处理程序无法执行，并防止事件使DOM树冒泡。

这是working demo