|
|---|
前回に続き、jQuery Mobileでカタログサイトを制作します。今回はアコーディオンパネルのCSSを作成します。
アコーディオンパネルのCSS
アコーディオンパネルのHTMLは次のようなシンプルなものでした（2つ目以降のアコーディオンは省略）。
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>SITE MENU 1</h3>
<p>sample text sample text sampletext sample text sample text sample text</p>
<p>sample text sample text sampletext sample text sample text sample text</p>
</div>
(省略)
</div>
ところが実際に表示された状態のHTMLをWebインスペクタで見ると、次のように複雑なHTMLに変換されているのが確認できます。
<div data-role="collapsible-set" class="ui-collapsible-set">
<div data-role="collapsible" data-collapsed="true" class="ui-collapsible-contain">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-z ui-btn-icon-left ui-corner-top" data-theme="z">
<span class="ui-btn-inner ui-corner-top">
<span class="ui-btn-text">SITE MENU 1
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</span>
<span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow">
<span class="ui-btn-inner ui-btn-corner-all ui-corner-top">
<span class="ui-btn-text"></span>
<span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
</span>
</span>
</span>
</a>
</h3>
<div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
<p>sample text sample text sampletext sample text sample text sample text</p>
<p>sample text sample text sampletext sample text sample text sample text</p>
</div>
</div>
(省略)
</div>
元のHTMLと比べると複雑なので分かりづらいですが、大まかには次の図のような構造になっています。
アコーディオンパネルの構造
見出しとなっているラベル部分、コンテンツが隠れているパネル部分、ラベルの左側にあるアイコン部分に分けてCSSを設定してきましょう。
アコーディオンのラベル部分のCSS
ラベル部分のCSSは以下のようになります。
.ui-body-z .ui-collapsible-set{
margin-top:20px;
}
.ui-body-z .ui-collapsible-contain{ ……【7】
margin-top:-5px;
}
.ui-body-z .ui-collapsible-contain h3{
border-radius:8px 8px 0 0;
margin:0 8px;
font-weight:normal;
}
.ui-body-z .ui-collapsible-contain:last-of-type h3{
border-radius:8px;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3{ ……【8】
background:#95be66;
background: -webkit-gradient(linear, left top, left bottom,from(#95be66),to(#649f1f));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(1) h3:not(.ui-collapsible-heading-collapsed){ ……【9】
border-bottom:4px #95be66 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3{ ……【8】
background:#b0ba63;
background: -webkit-gradient(linear, left top, left bottom,from(#b0ba63),to(#8c9a1b));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(2) h3:not(.ui-collapsible-heading-collapsed){ ……【9】
border-bottom:4px #b0ba63 solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3{ ……【8】
background:#bfa65c;
background: -webkit-gradient(linear, left top, left bottom,from(#bfa65c),to(#a07d10));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(3) h3:not(.ui-collapsible-heading-collapsed){ ……【9】
border-bottom:4px #bfa65c solid;
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3{ ……【8】
background:#bf8a5c;
background: -webkit-gradient(linear, left top, left bottom,from(#bf8a5c),to(#a15411));
}
.ui-body-z .ui-collapsible-contain:nth-of-type(4) h3:not(.ui-collapsible-heading-collapsed){ ……【9】
border-radius:8px 8px 0 0;
border-bottom:4px #bf8a5c solid;
}
.ui-body-z .ui-collapsible-contain a{
font-size:14px;
color:white;
text-shadow:1px 0 1px rgba(0,0,0,0.3);
text-decoration:none;
padding:8px 0 10px;
}
.ui-body-z .ui-collapsible-contain:last-of-type a{
padding-bottom:8px;
}
アコーディオンパネルのラベル部分は以下の図のような構造になっていて、パネルが閉じているときはラベル同士が少し重なっています。
【7】ではパネル全体を5px上にずらすことで、下のラベルが上のラベルに重なるように設定しています。
ラベル部分のグラデーションは【8】で設定しています。グレースフルデグラデーション（関連記事）の考え方に基づき、-webkit-gradientに対応しているデバイスにのみグラデーションを適用し、対応していないブラウザーにはbackgroundで設定した背景色が適用されるように設定しています。
多くのブラウザーやデバイスでグラデーションを表現しようとするとコード量が膨大になりますが、現在発売されているiPhoneやAndroidの標準ブラウザーへの対応ならこれで十分です。CSS3のnth-of-type擬似クラスを利用して、行ごとのグラデーションカラーを設定します。
【9】では、パネルが開いているときのラベルのスタイルを設定しています。jQuery Mobileでは、アコーディオンパネルが閉じていると、h3要素にclass属性「ui-collapsible-heading-collapsed」が自動的に追加されます。セレクターで h3:not(.ui-collapsible-heading-collapsed) とすると、パネルが閉じていないとき（つまりパネルが開いているとき）のスタイルを設定できます。サンプルでは、4pxのボーダーをボックスの下に設定しています。
