0

JSF-2.0、Mojarra 2.1.19、PrimeFaces 3.4.1

コンポーネントにホバーイベント（mouseOver mouseOut）が必要p:panelです。あると想像してみましょう：

<h:form id="dataTableForm">
    <p:dataTable id="dataTable>
        <p:panel id="hoverPanel">
            <p:commandLink id="button" value="Show" rendered="condition"></p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

私の機能要件は、マウスポインターが上にあるときはhoverPanelコンポーネントp:commandLinkを表示する必要があり、そうでない場合は（mouseOut）非表示にする必要があることを示しています。これは、CSSプロパティを設定することで実行できるとdisplay思います。renderedのプロパティはすでに1つあるので使用したくありませんp:commandLink。これはサーバーに移動して戻る必要はなく、クライアント側で実行する必要があります。

私は使用しようとしました：

$('.hoverPanel').hover(
   alert('mouseOn');           
);

しかし、これはうまくいきませんでした。私もsthが必要です。hoverPanelに含まれているため、さまざまなコンポーネントごとにより具体的ですp:dataTable。

4

2 に答える 2

2

間違ったセレクターを使用しました。パネルにクラスを定義しませんでしたが、代わりに名前付けコンテナーによって変更されるIDを定義しました。コメントを考慮すると、最も簡単な解決策は、必要なパネルに追加のクラスを定義することです。

景色：

<h:form id="form">
    <p:dataTable id="table">
        <p:panel id="hoverPanel" styleClass="base-class #{bean.condition ? 'change-panel' : ''}">
            <p:commandLink id="button" styleClass="btn" value="Show" rendered="condition">
            </p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

そしてJavaScriptであなたの仕事をしてください：

$('.change-panel').hover(
    function () {
       $(this).find('.btn').toggleClass('visible');
    }
    //or do your job by binding two function handlers to distinguish between mouse events
);

完全な答え

あなたのコメントと与えられた自己回答によると、それは明らかに仕事をするための最良の方法ではありません、私は完全な答えを投稿します。次の質問をすることにし、答えが得られる場合は、提示されたコードを完全に調査するために最善を尽くしてください。また、途中でJavaScript/jQueryを学ぶのが賢明でしょう。

ビューには2列のデータテーブルが表示され、2番目の列には必要なリンクを含むパネルが表示されます。この表には、考えられるすべての選択肢が含まれているため、最適な設定を選択してください。

表示：

<h:head>
    <h:outputScript name="js/js.js" target="body"/>
    <style>
        .invisible {
            display: none
        }
    </style>
</h:head>
<h:body>
    <h:form id="form">
        <p:dataTable value="#{bean.data}" var="data" id="table" rowIndexVar="index">
            <p:column headerText="Data">
                <h:outputText value="#{data}"/>
            </p:column>
            <p:column headerText="Other functions">
                <p:panel id="hoverPanel" styleClass="#{((index eq 0) || (index eq 1) || (index eq 2)) ? 'change-panel' : ''}">
                    <h:outputText value="Row #{index + 1}"/>
                    <p:commandLink id="button" value="Show"
                                   rendered="#{!((index eq 1) || (index eq 3))}"
                                   styleClass="btn #{(index eq 0) ? 'invisible' : ''}"/>
                </p:panel>
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>

JavaScript：

$(document).ready(function() {
    $('.change-panel').hover(
        function () {
           $(this).find('.btn').toggleClass('invisible');
        }
    );
});

Bean：

@ManagedBean
@RequestScoped
public class Bean implements Serializable {

    private List<String> data = new ArrayList<String>();

    public Q15435267Bean() {
        data.add("Data element 1");
        data.add("Data element 2");
        data.add("Data element 3");
        data.add("Data element 4");
        data.add("Data element 5");
    }

    public List<String> getData() {
        return data;
    }

    public void setData(List<String> data) {
        this.data = data;
    }

}
于 2013-03-15T16:09:53.443 に答える
0

条件が false であるかのように、最初に render の commandLink を削除します。リンクは HTML に存在しません。

<h:form id="dataTableForm" prependId="false">
    <p:dataTable id="dataTable" rowIndexVar="index">
        <p:panel id="hoverPanel_#{index}">
            <p:commandLink id="button" value="Show" style="display: none;">             </p:commandLink>
        </p:panel>
    </p:dataTable>
</h:form>

$("[id$='hoverPanel_1']").hover(
function(){
if'(#{put your condition where it was in render}'=='true'){
$("[id$='button']").show();
   alert('mouseOn');           
}
}, function(){
$("[id$='button']").hide();

});

于 2013-03-15T16:17:44.103 に答える