Orbeon Forms에 대한 Wikibooks Vertical Menu 예제를 어떻게 적용 할 수 있습니까?

Question

Orbeon과 함께 수직 메뉴를 구현하는 데 도움을 찾고 있습니다. 다음은 내가 찾고있는 것의 예입니다 : http://en.wikibooks.org/wiki/XForms/Vertical_Menu.

구현 방법에 대한 모든 지침이 있습니까? 여기에 지금까지이 작업은 다음과 같습니다

<fr:button> 
    <xforms:label ref="$form-resources/section-1/label"/> 
    <xforms:toggle case="case-1" ev:event="DOMActivate" /> 
    </fr:button> 
    <fr:button> 
    <xforms:label ref="$form-resources/section-2/label"/> 
    <xforms:toggle case="case-2" ev:event="DOMActivate" /> 
    </fr:button> 
    <xforms:switch> 
    <xforms:case id="case-1" selected="true()"> 
       ... 

이 가까운,하지만 버튼이 화면 주위에 사용자가 클릭으로 강조를 유지하지 않습니다. 이상적으로 다른 버튼을 클릭하지 않으면 버튼이 계속 강조 표시됩니다.

업데이트 : 내가 시각화 (전환 또는 섹션이 표시되는 동안 푸시 다운 할 것처럼 보이는 부분의 버튼을 표시하는 양식 섹션을 선택하는 수직 버튼 메뉴)에 더 관심이 있어요.

Answer 1

예를 들면 target pseudo-class을 사용하여 CSS를 통해 현재 탭을 강조 표시합니다. IE에서는 버전 9 이후에만 supports the target pseudo-class이 기술의 실용성을 제한합니다.

그래도 만족 스럽다면 Orbeon Forms를 사용하여 동일한 작업을 수행 할 수 있습니다. 위의 예에서 대상은 <a href="#tab1">으로 변경됩니다. 대상 의사 클래스에 의존하지 않고 할 수있는 방법이 존재하지만,

<fr:button> 
    <xforms:label>Select Items</xforms:label> 
    <xforms:action ev:event="DOMActivate"> 
     <xforms:toggle case="case-2"/> 
     <xforms:load resource="#tab1"/> 
    </xforms:action> 
</fr:button>