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アイコンを変更する

答えて

関連する問題