如何覆盖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不是函数"！

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

知道在素数面中重写ContentFlow javascript配置的正确方法是什么吗？

Answer 1

ContentFlow是一个纯粹的jQuery插件，PrimeFaces将其视为插件，没有向小部件添加额外的功能，因此，您可以使用普通的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树中冒泡。

这是一个工作演示

Answer 2

通过使用AddOn，我发现了比以前使用的第一种方法更好、更干净的方法，并保证了方法和更清晰，如下所示：

if (typeof ContentFlowGlobal != 'undefined') {
    new ContentFlowAddOn('ImageSelectAddOn', {
        ContentFlowConf : {
            // onclickInactiveItem: function (item) {
            // this.conf.onclickActiveItem(item);
            // },
            onclickActiveItem : function(item) {
                var content = item.content;
                var i = item.index;
                // console.log("index : "+item.index);
                imageId = i + 1;
                // console.log("select called image id : " + imageId);
                ma([ {
                    name : 'id',
                    value : imageId
                } ]);
            },
            onReachTarget : function(item) {
                this.conf.onclickActiveItem(item);
            }
        }
    });
    ContentFlowGlobal.setAddOnConf("ImageSelectAddOn");
}

ContentFlow的完整文档可以在以下链接中找到：http://www.jacksasylum.eu/ContentFlow/docu.php，你可以做很多定制。

附言：ma()是p:remoteCommad的name，所以我可以将变量传递给backbean。

我的问题就这样解决了，我对这种方式感到满意，我希望以后能分享一些对别人有帮助的东西。