Richfaces jQuery를 사용하여 다른 클래스를 탭에 추가합니다.

StackOverflow https://stackoverflow.com/questions/1084744

문제

나는 부자가 있습니다 : 여러 탭이있는 Tabpanel. jQuery를 사용하여 각 탭에서 변경 사항을 녹음하여 탭 내에서 변경되면 탭의 배경 이미지를 변경합니다.

다음과 같이 보입니다. 

<h:form id="form">
    <rich:jQuery selector="#tab1_lbl" query="addClass('testClass')" timing="onload"/>
        <rich:tabPanel switchType="client" id="tabContainer">
            <rich:tab id="tab1" label="tab1" title="tab1" >
                 tab1
            </rich:tab>

            <rich:tab id="tab2" label="tab2">
                 tab2
            </rich:tab>
       </rich:tabPanel>
</h:form>

셀렉터가 #TAB_LBL이라고 말하는 이유는 이것으로 생성 된 HTML이 다음과 같이 보이기 때문입니다. 

<td id="form:tab1_lbl" class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active " title="tab1" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);">
tab1
</td>

이제 나는 또한이 selector = "#form : tab_lbl"과 같은 선택기를 지정하려고했지만 여전히이 TD 요소에 클래스를 추가 할 수는 없습니다. 이에 대한 이유가 있습니까? Richfaces Tabpanel을 사용하지 않고 새 테이블을 만들면 동일한 선택기와 함께 클래스를 추가하는이 방법을 쉽게 사용할 수 있지만이 예에서는 작동하지 않습니다.

어떤 아이디어?

편집 : Firebug를 사용하고 수업을 손으로 추가하면 결과를 찾고 있습니다.

도움이 되었습니까?

해결책

rich:jQuery 구성 요소와 일치 할 수있는 경우 적절한 ID를 찾을 수 있습니다. 로부터 Richfaces 개발자 가이드:

선택기를 정의 할 때 Richfaces는 컨텐츠를 검사하고 선택기 ID의 정의를 찾은 경우 구성 요소 ID로 바꾸려고합니다.

또한 지정할 때 주어진 예를 살펴보십시오. 정확한 ID:

<rich:jQuery selector="#form\\:menu img" query="..." />

(결장을 피하기 위해 이중 백 슬래시에 주목하십시오)

당신은 사용할 수 있습니다 #tab1 선택기와 리치로서 : jQuery는 올바른 ID로 대체합니다. 그러나 이것은 탭을 찾을 수 있고 탭 레이블을 원합니다.

따라서 라벨을 찾는 더 강력한 방법 (페이지를 이동하거나 ID 양식을 제공하는 경우 여전히 작동한다면 여전히 작동합니다)은 탭을 찾는 것입니다. 따라서 가능한 선택기는 다음과 같습니다.

#tab1/../td.rich-tab-header
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top