탭 헤더 안에 JSF 드롭 다운 목록

JSF와 rich face 4.5.5를 사용 중이며 탭 패널의 헤더에 드롭 다운을 표시하려고합니다. 지금까지 내가 가지고있는 것입니다 :탭 헤더 안에 JSF 드롭 다운 목록

<rich:tabPanel id="reportTabPanel" > 
    <a4j:repeat var="reportCategory" value="${workBean.categories}"> 
     <rich:tab> 
      <f:facet name="header"> 
       <h:panelGroup>     
        <h:selectOneMenu value="#{reportCategory.currentSelection}" style="background:none;border:none;width:15px"> 
         <f:selectItems value="#{reportCategory.availableReports}" /> 
        </h:selectOneMenu> 

        <h:outputText value="#{reportCategory.displayedTitle}" />       
       </h:panelGroup> 
      </f:facet> 

      <div id="reportContent" name="content" > 
       <h:outputText value="#{reportCategory.displayedContent}" escape="false" /> 
      </div>    
     </rich:tab> 
    </a4j:repeat> 
</rich:tabPanel>

괜찮아요. 왼쪽에 드롭 다운 화살표가 표시되고 각 탭 머리글의 오른쪽에 탭 이름이 있습니다. 그러나 사건 처리는 사기다. 드롭 다운을 클릭하면 버튼을 놓자 마자 목록이 열리고 닫힙니다 (목록에서 선택하지 못하게 함). 드롭 다운 목록에서 무엇인가를 선택하려면 목록이 닫히지 않도록 마우스 단추를 누른 상태로 머리글 영역 외부로 놓아야합니다. 그래야만 드롭 다운 영역에서 내 옵션을 선택할 수 있습니다. 나는 탭 헤더가 릴리스 버튼 이벤트를 잡아서 필요하다면 탭을 변경하는 데 사용한다고 생각한다.

내가 원하는 것은 드롭 다운이 탭 헤더보다 우선하는 것입니다. 어쨌든 그렇게하는거야? 또는 드롭 다운을 열었을 때 열 수있는 방법이 있습니까?

JSF의 전문가는 아닙니다. 커스텀 렌더러를 구현하려고 시도했지만, 문제는 시각적 이벤트보다 이벤트와 관련이 있기 때문에 올바른 방법인지 확실하지 않습니다. 어떠한 제안? 포인터?

감사합니다. w.

출처

2017-10-13 willix

클릭 이벤트가 탭에 도달하지 못하도록 에 onclick="event.stopPropagation()"을 간단히 추가하십시오.

(그 이유는 당신이 탭 헤더의 선택이 필요합니까했다? 그것은 탐색 요소입니다.)

출처

2017-10-16 09:58:29 Makhiel

이런 많은 감사 Makhiel, 당신이 내 하루를 저장! :-) – willix

또한 onclick 이벤트 핸들러를 추가하고 Ajax 호출로 컨텐트와 헤더를 새로 고쳐야합니다. – willix

그리고 그냥 질문에 대답하기 위해 탭의 선택은 여러 범주의 문서를 선택하는 방법입니다. 탭은 문서의 범주 또는 그룹을 나타내며 각 선택 항목은 해당 그룹의 문서를 표시합니다. 필자의 경우 각 탭은 특정 유형의 문서이며 select는 주어진 언어로 변환 된 문서입니다. Im no Ux 전문가 (그리고이 프로젝트에서 하나를 가졌습니다)하지만 프로젝트 소유자가이 프로젝트를 원하는 방식입니다! – willix

탭 헤더 안에 JSF 드롭 다운 목록

답변

관련 문제