컨트롤 그룹 활성 버튼 테마 변경

Question

나는 controlgroup이 있고 동적으로 ui-btn-active 클래스를 추가 및 제거하여 활성 버튼을 토글합니다. 버튼이 잘 터지지 만 활성화 된 버튼 테마를 변경하는 방법을 찾지 못하는 것 같습니다.

이 난에서 활성 버튼을 a 테마를 사용하는 d 테마 및 활성 버튼을 사용하고 싶습니다.

아무도 내가 이것을 할 수있는 방법을 알고 있습니까?

HTML :

<div data-role="controlgroup" data-type="horizontal"> 
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a> 
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a> 
</div> 

Answer 1

OK 이렇게하면 끝났습니다.

jQuery를 :

$('[data-role="page"]').live('pageshow', function() { 
    $('#myApptBtn').addClass('ui-btn-active'); 

    $('#myApptBtn').click(function() { 
     $('#allApptBtn').removeClass('ui-btn-active'); 
     $('#myApptBtn').addClass('ui-btn-active'); 
    }); 

    $('#allApptBtn').click(function() { 
     $('#myApptBtn').removeClass('ui-btn-active'); 
     $('#allApptBtn').addClass('ui-btn-active'); 
    }); 
}); 

HTML :

<li data-theme="d" class="li-state-small" style="text-align: center;"> 
    <div data-role="controlgroup" data-type="horizontal" class="btnFontSize12"> 
     <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a> 
     <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a> 
    </div> 
</li> 

대답 질문 :

그래서 결국, 당신은 마크 업을 통해 테마를 덮어 쓸 수 없습니다.

JQuery와 모바일 프레임 워크

Global "Active" state

는 "활성"라는 견본을 사용 (기본 테마 밝은 파란색)에 지속적으로 선택된 상태 에 관계없이 주어진 위젯의 개별 견본을 나타냅니다. 현재 을 표시해야 할 때마다 탐색 및 양식 컨트롤에이 값을 적용합니다 ( ). 이 테마 견본은 명확하고 일관된 사용자 피드백 용으로 설계되었으므로 마크 업을 통해 재정의 할 수 없습니다. 테마에서 한 번 설정되고 선택한 상태 나 활성 상태가 필요할 때마다 프레임 워크 에 의해 적용됩니다. 이 상태의 스타일링은 UI 스타일 시트에서 ui-btn-active 스타일 규칙 아래에 있습니다.

Answer 2

당신은이 작업을 수행하기 위해 jQuery를의 .addClass 및 .removeClass 기능을 사용할 수 있습니다. 활성 및 비활성 클래스를 설정하고 jQuery를 사용하여 onclick을 변경하십시오.

다음은 예제입니다. 저는 jQuery에서 전문적이지는 않지만 이것은 잘 작동합니다 : Example