アコーディオン Widget のカスタマイズ
"SpryAccordion.css" ファイルには、アコーディオン Widget のデフォルトのスタイル設定が用意されています。 ただし、該当する CSS を変更することによって簡単に Widget をカスタマイズできます。 "SpryAccordion.css" ファイルの CSS ルールでは、アコーディオンの HTML コードの関連するエレメントと同じクラス名が使用されるため、アコーディオン Widget のさまざまなセクションに対応する CSS ルールを簡単に把握できます。 さらに、"SpryAccordion.css" ファイルには、Widget に関連するビヘイビア (マウスオーバーやクリックのビヘイビアなど) のクラス名が含まれています。
"SpryAccordion.css" ファイルは、カスタマイズを開始する前に Web サイトに配置しておく必要があります。 詳細については、ファイルの準備を参照してください。
アコーディオン Widget のスタイル設定 (一般的な方法)
アコーディオン Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
- "SpryAccordion.css" ファイルを開きます。
- アコーディオンの変更する部分の CSS ルールを見つけます。 たとえば、アコーディオンのタブの背景色を変更するには、"SpryAccordion.css" ファイルの AccordionPanelTab ルールを編集します。
- CSS を変更してファイルを保存します。
"SpryAccordion.css" ファイルおよび HTML コードのスタイル関連のクラス名を独自のクラス名に置き換えることができます。 置き換えても Widget の機能には影響しません。
"SpryAccordion.css" ファイルには、特定のルールに対するコードおよび目的を説明するさまざまなコメントが含まれます。 詳細については、ファイル内のコメントを参照してください。
アコーディオン Widget のテキストのスタイル設定
アコーディオン Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
アコーディオン Widget のテキストスタイルを変更するには、次の表を使用して "SpryAccordion.css" ファイルで適切な CSS ルールを見つけ、独自のテキストスタイルプロパティおよび値を追加します。
|
変更するテキスト |
関連する CSS ルール |
追加するプロパティおよび値の例 |
|---|---|---|
|
アコーディオン全体 (タブとコンテンツパネルの両方を含む) のテキスト |
.Accordion または .AccordionPanel |
font: Arial; font-size:medium; |
|
アコーディオンパネルタブのテキストのみ |
.AccordionPanelTab |
font: Arial; font-size:medium; |
|
アコーディオンコンテンツパネルのテキストのみ |
.AccordionPanelContent |
font: Arial; font-size:medium; |
アコーディオン Widget の背景色の変更
次の表を使用して "SpryAccordion.css" ファイルで適切な CSS ルールを見つけ、背景色プロパティおよび値を追加または変更します。
|
変更する Widget の部分 |
関連する CSS ルール |
追加または変更するプロパティおよび値の例 |
|---|---|---|
|
アコーディオンパネルタブの背景色 |
.AccordionPanelTab |
background-color: #CCCCCC; (これが初期設定値です) |
|
アコーディオンコンテンツパネルの背景色 |
.AccordionPanelContent |
background-color: #CCCCCC; |
|
開いたアコーディオンパネルの背景色 |
.AccordionPanelOpen .AccordionPanelTab |
background-color: #EEEEEE; (これが初期設定値です) |
|
マウスポインタがあるときのパネルタブの背景色 |
.AccordionPanelTabHover |
color: #555555; (これが初期設定値です) |
|
マウスポインタがあるときの開いたパネルタブの背景色 |
.AccordionPanelOpen .AccordionPanelTabHover |
color: #555555; (これが初期設定値です) |
アコーディオンの幅の固定
初期設定では、アコーディオン Widget は使用可能なスペースいっぱいに拡張されます。 アコーディオン Widget の幅を制限するには、アコーディオンコンテナの幅プロパティを設定します。
- "SpryAccordion.css" ファイルで .Accordion CSS ルールを見つけます。 このルールは、アコーディオン Widget のメインコンテナエレメントのプロパティを定義します。
- このルールに、width: 300px; のように幅プロパティと値を追加します。
アコーディオンパネルの高さの変更
デフォルトでは、アコーディオン Widget パネルの高さは 200 ピクセルに設定されています。 パネルの高さを変更するには、.AccordionPanelContent ルールの高さプロパティを変更します。
アコーディオンパネルのビヘイビアの変更
アコーディオン Widget には、いくつかの定義済みビヘイビアがあります。 これらのビヘイビアは、特定のイベントが発生したときの CSS クラスの変更で構成されます。 たとえば、マウスポインタがアコーディオンパネルタブの上に置かれると、AccordionPanelTabHover クラスが Widget に適用されます。 このビヘイビアは、リンクの a:hover に似ています。 ビヘイビアは、デフォルトでは空白です。変更するには、ルールにプロパティおよび値を追加します。
<script type="text/javascript">
var acc2 = new Spry.Widget.Accordion("Acc2", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
</script>
パネルアニメーションのオフ
デフォルトでは、アコーディオンパネルはアニメーションを使用して滑らかに開閉します。 ただし、パネルがすぐに開閉するように、このアニメーションをオフにすることができます。
アニメーションをオフにするには、次のようにパラメータをアコーディオンコンストラクタに送ります。
<script type="text/javascript">
var acc5 = new Spry.Widget.Accordion("Acc5", { enableAnimation: false });
</script>
パネルアニメーションのタイミングの設定
パネルが開くときにかかる時間を変更できます。 時間はミリ秒単位で設定します (1000 = 1 秒)。 デフォルトでは、500 ミリ秒が使用されます。
duration オプションをコンストラクタに追加します。
<script type="text/javascript">
var acc9 = new Spry.Widget.Accordion("Acc9", { duration: 100 });
</script>
変更可能なパネルの高さの設定
デフォルトでは、アニメーションが有効になっている場合、すべてのアコーディオンコンテンツパネルで強制的に同じ高さが使用されます。 この高さは、CSS またはパネルのコンテンツの高さで決定されるアコーディオンの最初に開くパネルの高さから取得されます。
アコーディオンでは、高さが可変のパネルもサポートされます。 このサポートをオンにするには、useFixedPanelHeights: false オプションをアコーディオンのコンストラクタに渡します。
次のように、useFixedPanelHeights:false オプションを渡します。
<script type="text/javascript">
var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false });
</script>
例については、Adobe Labs からダウンロードした Spry ディレクトリの samples ディレクトリにあるアコーディオンのサンプルファイルを参照してください。 詳細については、ファイルの準備を参照してください。
Spry でパネルの高さが CSS コードではなく JavaScript の設定値に設定されるようにするには、コンテンツパネルの高さをプログラムで設定する fixedPanelHeight オプションを渡します。 このオプションではピクセルが使用されます。
<script type="text/javascript">
var acc7 = new Spry.Widget.Accordion("Acc7", { fixedPanelHeight: "300px" });
</script>