アコーディオン Widget の CSS コード
"SpryAccordion.css" ファイルには、アコーディオン Widget のスタイルを設定するルールが含まれています。 このルールを編集して、アコーディオンの外観と印象に関するスタイル設定を実行できます。 CSS ファイル内のルールの名前は、アコーディオン Widget の HTML コードで指定されたクラスの名前に直接対応します。
注意： "SpryAccordion.css" ファイルおよび HTML コードのスタイル関連のクラス名を独自のクラス名に置き換えることができます。 CSS コードは Widget の機能には不要であるため、置き換えても Widget の機能には影響しません。
スタイルシートの末尾にあるビヘイビアクラスのデフォルト機能は、JavaScript ライブラリファイル "SpryAccordion.js" で定義されます。 デフォルト機能を変更するには、スタイルシートのビヘイビアルールにプロパティおよび値を追加します。
"SpryAccordion.css" ファイルの CSS コードを次に示します。
/*Accordion styling classes*/
.Accordion {
border-left: solid 1px gray;
border-right: solid 1px black;
border-bottom: solid 1px gray;
overflow: hidden;
}
.AccordionPanel {
margin: 0px;
padding: 0px;
}
.AccordionPanelTab {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
}
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
}
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionPanelClosed .AccordionPanelTab {
}
/*Accordion behaviors classes*/
.AccordionPanelTabHover {
color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
background-color: #3399FF;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #33CCFF;
}
"SpryAccordion.css" ファイルには、特定のルールに対するコードおよび目的を説明するさまざまなコメントが含まれます。 詳細については、ファイル内のコメントを参照してください。