Spry
前へ
次へSpry Widget の操作 / アコーディオン Widget の操作
アコーディオン Widget のカスタマイズ"SpryAccordion.css" ファイルには、アコーディオン Widget のデフォルトのスタイル設定が用意されています。ただし、該当する CSS を変更することによって簡単に Widget をカスタマイズできます。 "SpryAccordion.css" ファイルの CSS ルールでは、アコーディオンの HTML コードの関連するエレメントと同じクラス名が使用されるため、アコーディオン Widget のさまざまなセクションに対応する CSS ルールを簡単に把握できます。 さらに、"SpryAccordion.css" ファイルには、Widget に関連するビヘイビア (マウスオーバーやクリックのビヘイビアなど) のクラス名が含まれています。
"SpryAccordion.css" ファイルは、カスタマイズを開始する前に Web サイトに配置しておく必要があります。 詳細については、ファイルの準備を参照してください。
注意： Internet Explorer バージョン 6 以前では、兄弟および子コンテキストセレクタ (.AccordionPanel + .AccordionPanel や .Accordion > .AccordionPanel など) はサポートされていません。
アコーディオン Widget のスタイル設定 (一般的な方法)アコーディオン Widget コンテナ全体のプロパティを設定するか、Widget の各コンポーネントのプロパティを個別に設定します。
1. "SpryAccordion.css" ファイルを開きます。
2. アコーディオンの変更する部分の CSS ルールを見つけます。 たとえば、アコーディオンのタブの背景色を変更するには、"SpryAccordion.css" ファイルの AccordionPanelTab ルールを編集します。
3. 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 の幅を制限するには、アコーディオンコンテナの幅プロパティを設定します。
1. "SpryAccordion.css" ファイルで .Accordion CSS ルールを見つけます。 このルールは、アコーディオン Widget のメインコンテナエレメントのプロパティを定義します。
2. このルールに、width: 300px; のように幅プロパティと値を追加します。アコーディオンパネルの高さの変更
デフォルトでは、アコーディオン Widget パネルの高さは 200 ピクセルに設定されています。 パネルの高さを変更するには、.AccordionPanelContent ルールの高さプロパティを変更します。
1. "SpryAccordion.css" ファイルで .AccordionPanelContent CSS ルールを見つけます。
2. 高さプロパティを目的の寸法に変更します。
注意： この値は常に、アコーディオンパネルの各サイズが同じになるように設定してください。アコーディオンパネルのビヘイビアの変更
アコーディオン Widget には、いくつかの定義済みビヘイビアがあります。 これらのビヘイビアは、特定のイベントが発生したときの CSS クラスの変更で構成されます。 たとえば、マウスポインタがアコーディオンパネルタブの上に置かれると、AccordionPanelTabHover クラスが Widget に適用されます。 このビヘイビアは、リンクの a:hover に似ています。 ビヘイビアは、デフォルトでは空白です。変更するには、ルールにプロパティおよび値を追加します。
1. "SpryAccordion.css" ファイルを開き、変更するアコーディオンビヘイビアの CSS ルールを見つけます。 アコーディオン Widget には、ビヘイビアの 4 つの組み込みルールがあります。
ビヘイビア
説明
.AccordionPanelTabHover
マウスポインタをパネルタブの上に置くとアクティブになります。
.AccordionPanelOpen
パネルタブが開くとアクティブになります。
.AccordionPanelClosed
パネルが閉じるとアクティブになります。
.AccordionFocused
アコーディオン全体にフォーカスが置かれるとアクティブになります。
例については、Adobe Labs からダウンロードした Spry ディレクトリの samples ディレクトリにあるアコーディオンのサンプルファイルを参照してください。 詳細については、ファイルの準備を参照してください。
2. 有効にするビヘイビアの CSS ルールを追加します。注意： ビヘイビアは Spry フレームワークの一部としてハードコーディングされているため、"SpryAccordion.css" ファイルのビヘイビア関連のクラス名を独自のクラス名に置き換えることはできません。デフォルトのクラスを独自のクラス名で上書きするには、次の例に示すように、新しい値をパラメータとしてアコーディオンコンストラクタに送ります。
パネルアニメーションのオフ
デフォルトでは、アコーディオンパネルはアニメーションを使用して滑らかに開閉します。 ただし、パネルがすぐに開閉するように、このアニメーションをオフにすることができます。
アニメーションをオフにするには、次のようにパラメータをアコーディオンコンストラクタに送ります。パネルアニメーションのタイミングの設定
パネルが開くときにかかる時間を変更できます。 時間はミリ秒単位で設定します (1000 = 1 秒)。 デフォルトでは、500 ミリ秒が使用されます。
duration オプションをコンストラクタに追加します。変更可能なパネルの高さの設定
デフォルトでは、アニメーションが有効になっている場合、すべてのアコーディオンコンテンツパネルで強制的に同じ高さが使用されます。 この高さは、CSS またはパネルのコンテンツの高さで決定されるアコーディオンの最初に開くパネルの高さから取得されます。
アコーディオンでは、高さが可変のパネルもサポートされます。 このサポートをオンにするには、useFixedPanelHeights: false オプションをアコーディオンのコンストラクタに渡します。
次のように、useFixedPanelHeights:false オプションを渡します。例については、Adobe Labs からダウンロードした Spry ディレクトリの samples ディレクトリにあるアコーディオンのサンプルファイルを参照してください。 詳細については、ファイルの準備を参照してください。
Spry でパネルの高さが CSS コードではなく JavaScript の設定値に設定されるようにするには、コンテンツパネルの高さをプログラムで設定する fixedPanelHeight オプションを渡します。 このオプションではピクセルが使用されます。
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/ja_JP/Spry/1.4/WS64B8DA6B-42EA-48bf-A64A-E8D36073C00B.html
Add Comment
