명령 단추를 기본적으로 선택하도록 설정합니다.

Question

부트 스트랩 토글 단추처럼 보이는 라디오 단추가 필요한 양식이 있습니다. 선택할 수

<div id="flightChoiceButtons" class="btn-group" data-toggle="buttons-radio"> 
    <h:commandButton type="button" styleClass="btn btn-inverse" value="One Way"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionOneWay}"/></h:commandButton> 
    <h:commandButton type="button" styleClass="btn btn-inverse" value="Round Trip"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionRoundtrip}"/></h:commandButton> 
</div> 

내가 지금 함께 붙어있어 나는 "왕복"버튼을 필요로하는 문제 : 나는 버튼 그룹에 명령 단추를 사용하고, 속성 data-toggle="buttons-radio" 설정과 같이하여이를 달성 , 또는 페이지가로드 될 때 작동 중지 상태에 있습니다. 페이지에 표시된 데이터가 이미 있어야하는 상태이기 때문에 버튼의 아약스 호출이 해고 될 필요가 없습니다.

누구든지 아이디어가 있습니까?

더 많은 정보가 필요하면 그 정보를 제공해 주어 기쁩니다.

Answer 1

부트 스트랩 단추의 활성 상태는 active 스타일 클래스의 존재로 식별됩니다. 아는 한, JSF가 스타일 클래스를 조건부로 인쇄하도록 할 수 있습니다. 모델이 어떻게 설정되는지는 분명하지 않으므로 #{searchFlightsBean.direction} 속성이 열거 형을 반환했다면 킥오프 예제 만 있습니다.

<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ONE_WAY' ? 'active' : ''}">...</h:commandButton> 
<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ROUND_TRIP' ? 'active' : ''}">...</h:commandButton> 

#{searchFlightsBean.direction == '...'} 부분을 다른 부울 조건으로 바꿀 수 있습니다. 이 답변에서 예제를 찾을 수 있습니다 : Conditionally displaying JSF components.