【jQueryMobile】特定ボタンのaction時の背景色を変える

アコーディオンを使用した際に、ヘッダ部分が自動的にボタンになるのはありがたいのですが
ボタンがactiveな時の背景色も、他のコントロールと同じスタイルが適用されます。

そこで、アコーディオンのヘッダボタンactive時の背景色を変更してみました。

アコーディオンを使用するとヘッダ部分は自動的にボタンになるため

<div data-role="collapsible" data-collapsed="false">
  <h3></h3>
<div>

と定義したものは、下記のように<a>タグが挿入され、ボタンのようになります。
<div data-role="collapsible" data-collapsed="false">
  <h3>
    <a href="#">
  </h3>
<div>

ボタンがactive状態のスタイルは<a>タグの「ui-btn-active」クラスによって
指定されています。
なので、若干強引ですが<h3>に対してクラスを設定して
そのクラスの子要素の「ui-btn-active」に対してスタイルを適用します。

例)
<div data-role="collapsible" data-collapsed="false">
  <h3 class="hdrClass"></h3>
<div>

この場合、h3に「hdrClass」というクラスを指定したので
後はスタイルシートに

.hdrClass .ui-btn-active{
}

もしくは

.hdrClass > .ui-btn-active{
}

というように設定して、背景色を適用すればactive時の背景色を
変更することができます。

コメント

人気の投稿