本日はAccordionコントロールのプロパティ、AutoSizeとSuppressHeaderPostbacksプロパティについて説明したいと思います。
1.ペインが開く時の高さを設定する
ペインが開くときの高さの設定をするには AutoSizeプロパティを使用します。Heightプロパティと合わせて使用します。
AutoSizeプロパティに設定できる値は下記の通りです。
None: コンテンツの内容に合わせて広がります。1行しかない場合は1行分、100行あれば100行分といったように、コンテンツ全体が表示されます。
Limit: コンテンツの内容に合わせて広がります。ただし、コンテンツを表示したときの高さがHeightプロパティを超える場合には、自動的にスクロールバーが表示されてHeightを超えないように自動調整されます。
Fill: コンテンツの内容に関係なく常にHeightの値までペインが開きます。
注意：
Internet Exprlorer6 & Internet Explorer7ではLimitモードはとFillは同じ動作をします。（既知の問題）
これはmax-height CSSがサポートされていないのが原因とのことです。
FireFoxで試してみましたが、こちらの方はうまく動作しました。
2.ヘッダーがクリックされたときのポストバックを抑止する
ヘッダーを<a>タグで装飾していて、且つポストバックを抑止したいときにはSuppressHeaderPostbacksプロパティを使用します。
ヘッダーを<a>タグで装飾しない場合はこのプロパティを使用する必要はありません。
Microsoftのサンプルでは以下のCSSを使用して、AccordionコントロールのHeaaderに<a>タグを使用して装飾がなされています。（ヘッダーにマウスカーソルを持って行くと、カーソルが手のマークになり下線を引いて強調表示される）
#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}
#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}
SuppressHeaderPostbacksプロパティはbool値を設定します。
True: ヘッダーの<a>タグがクリックされてもポストバックしない
false: ヘッダーの<a>タグがクリックされたらポストバックする
今回使用したソースコードは下記の通りです。
<%@ 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テスト3</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"
AutoSize="Limit"
Height="200px"
SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="" class="accordionLink">ヘッダー1</a></Header>
<Content>コンテンツ1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="" class="accordionLink">ヘッダー2</a></Header>
<Content>コンテンツ2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Header><a href="" class="accordionLink">ヘッダー3</a></Header>
<Content>コンテンツ3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>実行結果は下記の通りです。
（画像では動作を確認できないので是非試してみてください）
