jquerymobile에서 사용자 정의 navbar 아이콘 변경

여러 바닥 글이있는 페이지에서 사용자 정의 navbar 아이콘을 변경하는 해결책을 찾지 못했습니다.jquerymobile에서 사용자 정의 navbar 아이콘 변경

내가 현재 사용하고 무엇을 그 :

$(".live_menu .ui-icon").css("background","url(/btn_on.gif) !important"); 
    $(".live_menu .ui-icon").css("background-repeat","no-repeat !important");

어떤 아이디어?

출처

2011-08-01 SteMa

관련 :

라이브 예 :

http://jsfiddle.net/phillpafford/8pwFK/29/

사용자 정의 아이콘

UI-아이콘을 접두어로하여 클래스를 생성합니다 MyApp를 - 이메일 및 버튼 플러그인과 같은 고유 한 이름을 가진 데이터 아이콘 값을 지정, 사용자 정의 아이콘을 사용하려면 -을 데이터 아이콘 값에 적용하고 버튼에 적용합니다. 아이콘 배경 소스를 지정하기 위해 ui-icon-myapp-email 클래스를 대상으로하는 CSS 규칙을 작성할 수 있습니다. 시각적으로 일관성을 유지하려면알파 투명도가있는 PNG-8로 저장된 18x18 픽셀의 흰색 아이콘을 만듭니다.

JS :

$('#custom-li-1').click(function() { 
    $(this).attr('data-icon','star'); 
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star'); 
}).page(); 

$('#custom-li-2').click(function() { 
    $(this).attr('data-icon','home'); 
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home'); 
}).page(); 

$('#custom-li-3').click(function() { 
    $(this).attr('data-icon','grid'); 
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid'); 
}).page();

HTML :

<div data-role="page" id="home"> 
    <div data-role="header" data-theme="b"> 
     <h1>Test</h1> 
    </div> 
    <div data-role="content" data-theme="d"> 
     <div data-role="navbar" data-theme="d"> 
      <ul id="custom-nav-list"> 
       <li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li> 
       <li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li> 
       <li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li> 
      </ul> 
     </div> 
    </div> 

</div>

출처

2011-08-01 18:23:08

jquerymobile에서 사용자 정의 navbar 아이콘 변경

답변

관련 문제