0

関数をオーバーライドしたいのですがonclickActiveItem、現在アクティブなアイテムのインデックスを取得するかonMakeActive、Primefaces で何かを呼び出す必要があります。どうすればよいですか?

次の方法で関数を呼び出すことができました：

<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 構成をオーバーライドする正しい方法は何か考えはありますか?

4

2 に答える 2

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 ツリーにバブルアップするのを防ぎます。

これが実際の デモです

于 2014-09-08T08:37:05.577 に答える
1

次のように、アドオンを使用することで、以前の最初の方法からより良く、よりクリーンな方法を見つけ、保証された方法とより明確になりました。

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。その後、多くのカスタマイズを行うことができます。

PS:ma()は、nameバックp:remoteCommadビーンに変数を渡すことができるようにするためです。

私の問題はこのように解決され、この方法に満足しています。後で他の人に役立つものを共有したいと思います.

于 2014-09-16T06:03:32.877 に答える