Easy to master Ajax.net series of tutorials ten: Use CollapsiblePanelExtender

This chapter describes how to use the CollapsiblePanelExtender. CollapsiblePanelExtender and the last chapter of the Accordion somewhat similar, but also can control the zooming of the specified area. However, a management area is Accordion group, group capable of generating interaction between each of the regions, a closed to open another, and primarily to control the zoom CollapsiblePanelExtender single region.

Step one: Create AJAX Control Toolkit Website

In this example we mainly need two Panel controls and a CollapsiblePanelExtender components, plus some auxiliary controls, not to list here. As follows:

<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader">

            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand.jpg" />&nbsp;&nbsp;

            <asp:Label ID="Label1" runat="server">显示内容……</asp:Label>

</asp:Panel>

These are Panel1 code, is Panel1 control region, which is responsible for controlling the state Panel2. In Panel1 where we define an Image control and a Label control. Both controls can display different images and text according to the state of Panel2.

Note: This must use server controls, otherwise CollapsiblePanelExtender will not find the relevant controls.

Panel2 content as long as an article on it, it is no longer listed here.

Attach relevant CSS style:

.collapsePanel {

   

    background-color:white;

    overflow:hidden;

}

 

.collapsePanelHeader{   

    width:100%;      

    height:30px;

    background:#666;

    color:#FFF;

    font-weight:bold;

}

Note: The above CSS styles, collapsePanel is Panel2 style used in this style, we can not specify the height, otherwise Panel2 will not be able to show and hide the normal, we can self-test.

Step Two: Set CollapsiblePanelExtender

Because too many properties to be set, please refer to the following code:

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

            CollapseControlID="Panel1"

            ExpandControlID="Panel1"

            TargetControlID="Panel2"

            ImageControlID="Image1"

            TextLabelID="Label1"

            CollapsedText = " display content ......"

            ExpandedText = " hidden content ......"

            ExpandedImage="~/images/collapse.jpg"

            CollapsedImage="~/images/expand.jpg">

</ajaxToolkit:CollapsiblePanelExtender>

CollapseControlID is hidden control refers to the control ID, ExpandControlID means controls the display of the control ID, since this is only one example of the control region, so that their values are Panel1 . If you have two control area, you can specify their values. TagetControlID refers to the need to control the target control ID, here is Panel2 . ImageControlID refers to the display picture of the state of the control ID, here is the Image1 , if not you can not specify. TextLabelID refers to the display control ID status text, here is Label1 , if not it can not be specified. The next CollapsedText , ExpandedText , CollapsedImage and ExpandedImage is to specify the text and images displayed in different states, they set according to the actual situation.

Set up, run! Results as shown:

Click on the "hidden content" the following article on the hidden.

End:

This chapter introduces the CollapsiblePanelExtender to use. CollapsiblePanelExtender and Accordion somewhat similar, but compared Accordion, CollapsiblePanelExtender effect a little monotonous, but using simpler than Accordion, can set the display pictures and text in different states, we choose the time must proceed from reality, to choose the right components.

 

TrackBack：http://www.cnblogs.com/sbitxg521/archive/2007/12/29/1020308.html

Reproduced in: https: //www.cnblogs.com/hdjjun/archive/2008/06/17/1223664.html