【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時の背景色を
変更することができます。
ボタンが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時の背景色を
変更することができます。
コメント
コメントを投稿