前回の基本使用方法では、CSS設定を行っていなかったためペインの区切りがわかりにくいものでした。
今回は、AccordionコントロールにCSSを設定して見やすくする方法を紹介します。
Accordionコントロールは、ヘッダー部分とコンテンツ部分のそれぞれにCSSを指定することが可能です。
ヘッダー部分へCSSを指定するには、HeaderCssClassプロパティを、コンテンツ部分にCSSを指定するにはContentCssClassプロパティを使用します。
CSSとソースコードは下記の通りです。
(CSSはMicrosoftのサンプルを使用しています）
StyleSheet.css
/* Accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Accordionテスト2</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent">
<Panes>
<ajaxToolkit:AccordionPane runat="server" >
<Header>ヘッダー1</Header>
<Content>コンテンツ1</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>ヘッダー2</Header>
<Content>コンテンツ2</Content>
</ajaxToolkit:AccordionPane>
</Panes>
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>ヘッダー3</Header>
<Content>コンテンツ3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
実行結果は下記の通りです。
CSSを設定することで見やすくなりましたね。
次回はAccordionコントロールのそのほかのプロパティの使用方法について説明したいと思います。