좋아, 이것은 간단하지만 아무것도 작동하지 않는 것 같습니다 ...
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1 class="ui-title" id="headertitle"></h1>
<a class="ui-btn-left ui-nodisc-icon ui-btn-inline ui-mini" id="leftButton" onclick="alert('this');" data-icon="gear" data-iconpos="notext"></a>
</div>
jQuery 모바일에서 페이지 변경시 이벤트를 표시하기 전에 pageshow, 페이지 생성 및 페이지에서 다음을 시도했습니다.
$('#leftButton').data("icon", "grid");
$('#leftButton').jqmData("icon", "grid");
$('#leftButton').attr("data-icon", "grid");
어느 것도 작동하지 않는 것 같습니다. 그렇다면 각 페이지에 맞게 헤더 버튼 아이콘을 어떻게 변경합니까?
jQuery 모바일에는 버튼 위젯과 버튼처럼 보이도록 스타일이 지정된 dom 요소가 있습니다. 귀하의 경우 앵커는 스타일이 지정되어 있으므로 클래스를 간단히 전환 할 수 있습니다.
<a id="leftButton" href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
$( "#leftButton" ).on("click", function(){
$(this).removeClass("ui-icon-gear").addClass("ui-icon-grid");
});
위젯을 사용하려면 코드 ( http://api.jquerymobile.com/button/#option-icon ) 에서 아이콘 옵션을 설정할 수 있습니다 .
<input id="btnWidget" type="button" data-icon="gear" data-iconpos="notext" value="Icon only" />
$( "#btnWidget" ).on("click", function(){
$(this).button( "option", "icon", "grid" );
});
다음은 두 기술 의 데모 입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다