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