Ajax controltoolkit Learning Log-collapsiblepanel (6)

The collapsiblepanel control is used to implement a foldable panel function similar to that in XP.

First, let's look at an example:

1) Create an ASP. NET Ajax-enabled web project named collapsiblepanel1.

2) drag and drop two panels in default. aspx. The IDS are collapsibleheaderpanel and collapsiblecontentpanel. The view is as follows:

3) Add a label and imagebutton to collapsibleheaderpanel to indicate whether the label and imagebutton can be expanded or collapsed. The view is as follows:

4) Add a collapsiblepanel to the page. And set some of its attributes. The view is as follows:

CollapsiblepanelCodeAs follows: 1 < C0: collapsiblepanelextender ID = "Collapsiblepanelextender1" Targetcontrolid = "Collapsiblecontentpanel" Collapsecontrolid = "Collapsibleheaderpanel" Expandcontrolid = "Collapsibleheaderpanel" Expanddirection = "Vertical"
2 Textlabelid = "Label1" Collapsedtext = "Hide details" Expandedtext = "Show Details" Collapsed = "True"
3 Imagecontrolid = "Imagebutton1" Collapsedimage = "Expand_blue.jpg" Expandedimage = "Collapse_blue.jpg" Suppresspostback = "True" Runat = "Server" >
4 </ C0: collapsiblepanelextender >

The following describes the Code:
A) targetcontrolid: This attribute specifies a panel, which is the content panel that collapsiblepanel wants to expand and display or collapse.
B) collapsecontrolid/expandcontrolid: This attribute specifies the ID of the control that controls the collapse/extension.
C) expanddirection: Specify the Extended Direction of the Panel.
D) textlabelid: Specifies a control that displays content in collapsedtext/expandedtext when extending or folding a panel.
E) collapasedtext/expandedtext: the text when the Panel is folded/expanded.
F) collapsed: Specifies whether the Panel is folded or extended during page import.
G) imagecontrolid: Specifies a control that displays the image in expandedimage during expansion and the image in collapsedimage during collapse.
H) expandedimage/collapsedimage: different images are displayed during expansion/collapse.
I) suppresspostback: the return is forbidden.

All the code on the page is as follows: < Form ID = "Form1" Runat = "Server" >
< ASP: scriptmanager ID = "Scriptmanager1" Runat = "Server"   />
< Div >
& Nbsp; < ASP: Panel ID = "Collapsibleheaderpanel" Borderwidth = "1px" Bordercolor = "Blue" Height = "16px" Runat = "Server" Width = "595px" >
< Div > Gjeojgoejgoejgojgoejegojoegeg & Nbsp;   & Nbsp;   & Nbsp;   & Nbsp;
< ASP: Label ID = "Label1" Runat = "Server" > </ ASP: Label >
& Nbsp;
< ASP: imagebutton ID = "Imagebutton1" Imageurl = "~ /Expand_blue.jpg" Alternatetext = "Show Details" Runat = "Server"   /> </ Div >
< Div >
& Nbsp; </ Div >

</ ASP: Panel >
< ASP: Panel ID = "Collapsiblecontentpanel" Borderwidth = "1px" Bordercolor = "Controldark" Height = "0px" Runat = "Server" >
< P Style = "Overflow: hidden" > Fdddddddddddddddddddddddddddddddddddfefefeeeeeeeeeeeee </ P > </ ASP: Panel >
</ Div >
< Div >
< BR />
< BR />
< C0: collapsiblepanelextender ID = "Collapsiblepanelextender1" Targetcontrolid = "Collapsiblecontentpanel" Collapsecontrolid = "Collapsibleheaderpanel" Expandcontrolid = "Collapsibleheaderpanel" Expanddirection = "Vertical"
Textlabelid = "Label1" Collapsedtext = "Hide details" Expandedtext = "Show Details" Collapsed = "True"
Imagecontrolid = "Imagebutton1" Collapsedimage = "Expand_blue.jpg" Expandedimage = "Collapse_blue.jpg" Suppresspostback = "True" Runat = "Server" >
</ C0: collapsiblepanelextender >
& Nbsp; </ Div >
</ Form >

Effect preview: