折りたたみパネル Widget のカスタマイズ
"SpryCollapsiblePanel.css" ファイルには、折りたたみパネル Widget のデフォルトのスタイル設定が用意されています。 ただし、該当する CSS ルールを変更することによって、Widget を簡単にカスタマイズできます。 "SpryCollapsiblePanel.css" ファイルの CSS ルールでは、折りたたみパネルの HTML コードの関連するエレメントと同じクラス名が使用されるため、折りたたみパネル Widget のさまざまなセクションに対応する CSS ルールを簡単に把握できます。 さらに、"SpryCollapsiblePanel.css" ファイルには、Widget に関連するビヘイビア (マウスオーバーやクリックのビヘイビアなど) のクラス名が含まれています。
"SpryCollapsiblePanel.css" ファイルは、カスタマイズを開始する前に Web サイトに配置しておく必要があります。 詳細については、ファイルの準備を参照してください。
折りたたみパネル Widget のスタイル設定 (一般的な方法)
折りたたみパネル Widget のコンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
- "SpryCollapsiblePanel.css" ファイルを開きます。
- 折りたたみパネルの変更する部分の CSS ルールを見つけます。 たとえば、折りたたみパネルのタブの背景色を変更するには、"SpryCollapsiblePanel.css" ファイルの CollapsiblePanelTab ルールを編集します。
- CSS ルールを変更してファイルを保存します。
"SpryCollapsiblePanel.css" ファイルおよび HTML コードのスタイル関連のクラス名を独自のクラス名に置き換えることができます。 置き換えても Widget の機能には影響しません。
"SpryCollapsiblePanel.css" ファイルには、特定のルールに対するコードおよび目的を説明するさまざまなコメントが含まれます。 詳細については、ファイル内のコメントを参照してください。
折りたたみパネル Widget のテキストのスタイル設定
折りたたみパネル Widget のコンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
折りたたみパネル Widget のテキストフォーマットを変更するには、次の表を使用して適切な CSS ルールを見つけ、独自のテキストスタイルプロパティおよび値を追加します。
|
変更するスタイル |
関連する CSS ルール |
追加または変更するプロパティおよび値の例 |
|---|---|---|
|
折りたたみパネル全体のテキスト |
.CollapsiblePanel |
font: Arial; font-size:medium; |
|
パネルタブのみのテキスト |
.CollapsiblePanelTab |
font: bold 0.7em sans-serif; (これが初期設定値です) |
|
コンテンツパネルのみのテキスト |
.CollapsiblePanelContent |
font: Arial; font-size:medium; |
折りたたみパネル Widget の背景色の変更
次の表を使用して適切な CSS ルールを見つけ、背景色プロパティおよび値を追加または変更します。
|
変更する色 |
関連する CSS ルール |
追加または変更するプロパティおよび値の例 |
|---|---|---|
|
パネルタブの背景色 |
.CollapsiblePanelTab |
background-color: #DDD; (これが初期設定値です) |
|
コンテンツパネルの背景色 |
.CollapsiblePanelContent |
background-color: #DDD; |
|
パネルが開いているときのタブの背景色 |
.CollapsiblePanelOpen .CollapsiblePanelTab |
background-color: #EEE; (これが初期設定値です) |
|
マウスポインタが上にあるときの、開いたパネルタブの背景色 |
.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover |
background-color: #CCC; (これが初期設定値です) |
折りたたみパネルの幅の固定
初期設定では、折りたたみパネル Widget は使用可能なスペースいっぱいに拡張されます。 折りたたみパネル Widget の幅を制限するには、折りたたみパネルのコンテナの幅プロパティを設定します。
- "SpryCollapsiblePanel.css" ファイルで CollapsiblePanel CSS ルールを見つけます。 このルールは、折りたたみパネル Widget のメインコンテナエレメントのプロパティを定義します。
- このルールに、width: 300px; のように幅プロパティと値を追加します。
折りたたみパネルの高さの変更
折りたたみパネルの高さを設定するには、CollapsiblePanelContent ルールまたは CollapsiblePanel ルールに高さプロパティを追加します。
"SpryCollapsiblePanel.css" ファイルの CollapsiblePanelContent ルールに、height: 300px; のように高さプロパティと値を追加します。
折りたたみパネルのビヘイビアの変更
折りたたみパネル Widget には、いくつかの定義済みビヘイビアがあります。 これらのビヘイビアは、特定のイベントが発生したときの CSS クラスの変更で構成されます。 たとえば、マウスポインタが折りたたみパネルタブの上に置かれると、CollapsiblePanelTabHover クラスが Widget に適用されます。 このビヘイビアは、リンクの a:hover に似ています。 ビヘイビアは、デフォルトでは空白です。変更するには、ルールにプロパティおよび値を追加します。
<script type="text/javascript">
var CP2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
</script>
パネルアニメーションのオフ
デフォルトでは、折りたたみパネルはアニメーションを使用して滑らかに開閉します。
パネルがすぐに開閉するようにアニメーションをオフにするには、次のようにパラメータを折りたたみパネルコンストラクタに送ります。
<script type="text/javascript">
var CP5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", { enableAnimation: false });
</script>