折りたたみパネル Widget の CSS コード
"SpryCollapsiblePanel.css" ファイルには、折りたたみパネル Widget のスタイルを設定するルールが含まれています。 このルールを編集して、折りたたみパネルの外観と印象に関するスタイル設定を実行できます。 CSS ファイルのルールの名前は、折りたたみパネル Widget の HTML コードで指定されたクラスの名前に直接対応します。
注意： "SpryCollapsiblePanel.css" ファイルおよび HTML コードのスタイル関連のクラス名を独自のクラス名に置き換えることができます。 CSS コードは Widget の機能には不要であるため、置き換えても Widget の機能には影響しません。
スタイルシートの末尾にあるビヘイビアクラスのデフォルト機能は、"SpryCollapsiblePanel.js" JavaScript ライブラリファイルで定義されます。 デフォルト機能を変更するには、スタイルシートのビヘイビアルールにプロパティおよび値を追加します。
"SpryCollapsiblePanel.css" ファイルの CSS コードを次に示します。
/*Collapsible Panel styling classes*/
.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
}
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
border-bottom: solid 1px #CCC;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #CCC;
}
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #3399FF;
}
"SpryCollapsiblePanel.css" ファイルには、特定のルールに対するコードおよび目的を説明するさまざまなコメントが含まれます。 詳細については、ファイル内のコメントを参照してください。