2016-05-09 8 views
0

私のCordova Appには、ホームと設定の2つのボタンが付いたタブストリップがあります。最初にデータアイコン属性を使用してこれらのボタンにアイコンを表示しましたが、Windows Phoneはフォントアイコンをサポートしていないので、pngファイルを使用しようとしました。各タブストリップボタンの内側にimgタグを追加し、ボタンが選択されるたびにアイコンをアクティブ/非アクティブカラーに変更しました。ここでCordova - タブストリップのアイコンを変更する

が私のコードです:

<div data-role="tabstrip" id="tabsptrip" data-select="onSelect">      
       <a href="views/home.html" id="homeTabstrip"><img id="homeIcon" src="Images/Icons/home_active.png" height="35" width="35" />Start</a> 
       <a href="views/Settings.html" id="settingsTabstrip"><img id="settingsIcon" src="Images/Icons/gearwheel_inactive.png" height="35" width="35" />Einstellungen</a> 
      </div> 


function onSelect(e) { 
      debugger; 
      console.log(e.item[0].id); 

      if (e.item[0].id == "homeTabstrip") { 
       $('#homeIcon').attr("src", "Images/Icons/home_active.png"); 
       $('#settingsIcon').attr("src", "Images/Icons/gearwheel_inactive.png"); 
      } else { 
       $('#homeIcon').attr("src", "Images/Icons/home_inactive.png"); 
       $('#settingsIcon').attr("src", "Images/Icons/gearwheel_active.png"); 
      } 
     } 

私は最初のアプリをロードする際に、HTMLで指定された正しいアイコンが表示されます。設定ページに行くと、アイコンが正しく交換され、gearwheel_active.pngとhome_inactive.pngのアイコンが表示されます。しかし、私がホームページに戻ると、アイコンは変わらない。 srcは正しく更新され、表示されるアイコンはgearwheel_inactive.pngとhome_active.pngではなくgearwheel_active.pngとhome_inactive.pngです。

画像ファイルは存在します(アプリケーションが最初に起動したときに正しく表示されるため)。エラーはスローされません。

答えて

0

jqueryでイメージソースを変更する代わりに、cssを変更してこれを解決しました。ここで

は私のコードです:

<div data-role="tabstrip" id="tabstrip" data-select="onSelect">      
        <a href="views/home.html" id="homeTabstrip">Start</a> 
        <a href="views/Settings.html" id="settingsTabstrip">Einstellungen</a> 
       </div> 

とCSS:

#tabstrip .km-icon { 
    background-repeat:no-repeat; 
    -webkit-background-clip: border-box; 
    background-size: 100% 100%; 
} 

#homeTabstrip.km-state-active span.km-icon { 
    background-image: url("../../Images/Icons/home_active.png"); 
} 

#homeTabstrip .km-icon { 
    background-image: url("../../Images/Icons/home_inactive.png"); 

} 

#settingsTabstrip.km-state-active span.km-icon { 
    background-image: url("../../Images/Icons/gearwheel_active.png"); 
} 

#settingsTabstrip .km-icon { 
    background-image: url("../../Images/Icons/gearwheel_inactive.png"); 

} 
関連する問題