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

Question

我想覆盖 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 is not a function”!

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

知道在 primefaces 中覆盖 ContentFlow javascript 配置的正确方法是什么吗？

Answer 1

ContentFlow是一个纯粹的 jQuery 插件，PrimeFaces 也这么对待它，没有在 widget 中添加额外的风格。 ,所以你可以使用普通的 jQuery 来实现这一点，不需要使事情复杂化，甚至不需要深入研究插件的事件。

例如，您可以使用 onclick，如果该项目正常单击，则它处于事件状态:

$(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