3

私はPrimeFaces 3.4の折りたたみ可能なパネルを使用しています。実際のソリューションの問題は、右側の小さなボタンをクリックしてパネルを切り替えることです。これはあまり人間工学的ではなく、ユーザーはヘッダーの任意の場所をクリックして切り替えを行うことを期待します。

これは私が実装したいものです: ヘッダーをクリックしてトグルをトリガーし、トグル ボタンを削除します。これは私が書いたものです：

$('.ui-panel-titlebar').each(function(){
    var header = $(this);
    var widgetId = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, '');
    header.css('cursor', 'pointer');
    var toggler = header.find('a[id$=_toggler]');
    toggler.remove();
    header.click(function(){
        window[widgetId].toggle();
    });
});

しかし、私はその解決策が好きではありません。なぜなら、最初に JavaScript ウィジェット ID を推測し、次にレンダリングされたトグル ボタンを DOM ツリーから削除していて、まったくレンダリングされないようにしたいからです。

あまりにも多くのコードを記述せずに (したがって、p:panel. PrimeFaces と同じライセンス (商取引に適した) に基づく拡張機能を使用することは、ソリューションとして受け入れられます。

4

5 に答える 5

2

私も同じ問題を抱えていましたが、残念ながら PrimeFaces ソリューションを見つけることができませんでした。タイトルバーをクリックした場合にトグルボタンのクリックをシミュレートするカスタム JQuery スクリプトを作成しました。

$(document).on("click", ".ui-panel:has(.ui-panel-titlebar-icon) .ui-panel-titlebar", function(e) {
    console.log("click:");
    if (e.srcElement != null) { // avoid infinite loop
        $(this).find("a.ui-panel-titlebar-icon").click();
    }
});

のおかげでon、これは Ajax の更新後も機能します。この動作を特定のクラス (例: ) のパネルにのみ設定するのは簡単だと思いますpanel-header-click。

コードは Chrome でのみテストしました。

于 2013-09-19T12:18:38.613 に答える
1

Primefaces 5.2 では

$(document).on("click", ".ui-panel:has(.ui-panel-titlebar-icon) .ui-panel-titlebar", function (e) {
    console.log(e.target.className);
    if (e.target.className === "ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
            || e.target.className === "ui-panel-title"){
        $(this).find("a.ui-panel-titlebar-icon").click();
    }
});
于 2015-12-30T15:51:44.237 に答える
1

p:accordionPanelは、ヘッダーの任意の場所をクリックして切り替えることができる折りたたみ可能なパネルです。

于 2013-02-16T10:29:40.513 に答える