如何覆盖 Primefaces 中的 ContentFlow 配置答案

【问题标题】：How to override ContentFlow configuration in Primefaces如何覆盖 Primefaces 中的 ContentFlow 配置
【发布时间】：2014-09-08 05:35:46
【问题描述】：

我想覆盖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，我仍然认为我做错了。

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

【问题讨论】：

标签： javascript jsf-2 primefaces contentflow

【解决方案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

【讨论】：

是的，我用类似的方法解决了我的问题，但我的问题是如何配置 onMakeActive 或 onReachTarget ！无论如何，我终于用新的ContentFlowAddOn 解决了我的问题，但仍然需要最好的方法，就像我在 jqplot 中所做的那样。
您的方式的问题是我将获得点击功能，但随后将继续打开图像，如果我添加警报作为示例，我将在警报框中单击确定时收到警报，它将继续打开图像。这是主要问题，所以解决方案是覆盖onclickActiveItem。
很抱歉，也许我第一次没有正确回答您的问题。我已经更新了答案..它可能符合您的要求。

【解决方案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，然后你可以做很多自定义。

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

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

【讨论】：