1

分割する必要がある非常に長いフォームが 1 つありますが、1 つのフォームとして送信され、検証されます。

これを tr:panelTabbed セクションに分割し、それぞれに一連のフィールドを表示します。

検証メッセージは最初のタブに正しく表示されますが、他のタブのいずれかがオンになっている場合、その検証メッセージは表示されません。

タブで元に戻ると、その検証メッセージも表示されません。

これを回避する方法はありますか？

タブ インターフェイスは一度に 1 つのタブしか生成せず、タブごとにページのリロードが必要なようです。

または、大きなフォームを分割するより良い方法はありますか? 「電車」のナビゲーションの見た目はあまり好きではありませんが、ここで目的を達成できますか?

編集: Myfaces と Trinidad を使用していますが、企業のガイドラインにより、別のコンポーネント ライブラリを使用できません。

編集: XHTML を投稿しました:

<ui:define name="output">
    <div id="container">
    <tr:panelTabbed position="above">

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
        <!-- Tab 1-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_EVS']}" rendered="#{taskHandler.task.evsDisplayInOD}">
            <snip for brevity>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="General Order Information" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">
        <!-- Tab 2-->
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_REP']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>

        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_CMR']}">
            <tr:panelFormLayout>
                <snip>
            </tr:panelFormLayout>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}" disabled="#{taskHandler.task.evsDisplayInOD}" disclosed="true">

        <!-- Tab 3 -->  
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
        <tr:spacer height="15px"/>
        <tr:panelCaptionGroup captionText="#{odMessages['MSG_ORDER_DESK_SECTION_LABEL_PO']}">
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
            <h:panelGroup styleClass="group">
                <snip>
            </h:panelGroup>
        </tr:panelCaptionGroup>
    </tr:showDetailItem>

    <tr:showDetailItem text="Translation Information" disabled="#{!taskHandler.task.translation.required}">
        <ui:include src="ToDo_ICN_trans.xhtml"/>
    </tr:showDetailItem>

    </tr:panelTabbed>
    <h:outputScript name="script/orderDeskPODocument.js"/>
    </div>
</ui:define>

<ui:define name="input">
...
</ui:define>

4

1 に答える 1

0

これには基本的なJavascript + CSSタブを使用することになりました。私の使用例では、タブは本当に表面的なものです。つまり、タブはページを分割しますが、個別に送信することを意図していません。

純粋な CSS タブの使用も検討しましたが、調査の結果、タブの高さがすべて等しくなく、AJAX を使用して変更される可能性がある場合には機能しません。

私が思いつく最善の解決策は、<a>リンクのリストを作成し、各 URL に対して onclick Javascript イベントを使用して、それが関連付けられている div (「タブ」) を作成することです (のhref属性を使用し<a>て、の id を保存します)。開こうとしている div)、および onclick で div の display CSS プロパティを変更します (className Javascript プロパティを変更して 1 つの div を表示し、他の div を非表示にします)。そうすれば、リストをクリックすると、div が表示されます。

Javascript タブ (ほとんどの Javascript ライブラリにはおそらく 1 つある) の多くの既製の実装と、オンラインのチュートリアルがあります。上で説明したことを実装するものは次のとおりです。

于 2014-01-13T15:21:01.593 に答える