AJAX アコーディオン コントロールの CSS スタイリング
AJAX アコーディオン コントロールのいくつかの単純な CSS スタイル ルール
AJAX
AJAX アコーディオン パネルは、AJAX ツールキットの一部として提供される優れた機能です。多くの情報を 1 ページに凝縮しながら、多くのスペースを節約できます。
これを使用する前に、次のことを確認する価値があるかもしれません。 AJAX ツールキット
コントロールをダウンロードして Visual Studio に追加する必要がありますが、この記事では詳しく説明しません。
コントロールは以下のパーツで構成されています。それぞれのコンテンツは、コンテンツ タグの間に入ります。
HTML
<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" ContentCssClass="accordionContent" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <asp:AccordionPane ID="PaneOne" runat="server" CssClass="accordion"> <Header>Pane1</Header> <Content> </Content> </asp:AccordionPane> <asp:AccordionPane ID="PaneTwo" runat="server" CssClass="accordion"> <Header>Pane2</Header> <Content> </Content> </asp:AccordionPane> </Panes></asp:Accordion>AJAX
これは、ログイン ページでアコーディオン ペインのスタイルを設定するために使用したコードです。CSS を使用すると、スタイルを一度だけ設定する必要があり、スタイルを CssClass="accordion" として設定します。また、上に設定された他の 3 つのセクションがあることもわかります。
コードの内訳は次のとおりです。
アコーディオンは外側のコンテナです。ここで設定しているのは、境界線の半径と幅だけです。
CSS
.accordion{width: 98%;margin: auto;border-radius: 5px;moz-border-radius: 5px;border: 1px solid #6C5A39;background-color: #DED3BE;}AJAX
アコーディオン ヘッダーは、選択されていないすべてのヘッダーのスタイルです。
CSS
.accordionHeader{border-radius: 5px;moz-border-radius: 5px;background-color: #DED3BE;font-weight: bold;text-align: center;padding: 0px 0px 2px 0px;}AJAX
これは選択されたヘッダーです。これを別の色に設定することで、ユーザーは選択したタブを簡単に識別できます。
CSS
.accordionHeaderSelected{border-top-right-radius: 5px;border-top-left-radius: 5px;moz-border-top-right-radius: 5px;moz-border-top-left-radius: 5px;border-bottom: 1px solid #6C5A39;background-color: #D1C2A5;font-weight: bold;color: #000000;text-align: center;padding: 0px 0px 2px 0px;}AJAX
これで、コンテンツ領域にスタイルを追加できます。これにより、選択したタブの背景の色が設定されます。
CSS
.accordionContent{border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;moz-border-bottom-right-radius: 5px;moz-border-bottom-left-radius: 5px;background-color: White;}AJAX
上記のコードは明らかに、できることの始まりに過ぎません。
