AjaxControlTookit系列之CollapsiblePanel

这里要实现的是AjaxControlTookit的CollapsiblePanel功能,这个功能的实现可以有多种方法，如用Js也可以很方便的实现了，这里只介绍CollapsiblePanelExtender这个控件是如何实现的。

还是先让大家看看效果图吧：

好下面开始，页面部分

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <div id="demo2" class="popular">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <div id="desc1">
                        ajax->CollapsiblePanelExtender</div>
                    <asp:Panel ID="popularGroup" runat="server">
                        <asp:Panel ID="popularHead" runat="server" CssClass="popular_head">
                        <asp:Image ID="img1" runat="server" />
                            <asp:Label ID="lblHead" Text="Popular Groups" runat="server"></asp:Label>
                        </asp:Panel>
                        <asp:Panel ID="popularContent" runat="server" CssClass="popular_content">
                            <asp:LinkButton runat="server" ID="lnkbtn1" Text="Pretty Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton1" Text="Nest Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton2" Text="Cool Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton3" Text="Silly Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton4" Text="Pretty Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton5" Text="Nest Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton6" Text="Cool Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton7" Text="Silly Images" /><br />
                        </asp:Panel>
                        <cc1:CollapsiblePanelExtender ID="cpe1" runat="server" TextLabelID="lblHead" CollapsedText="Popular Groups &#9660"
                            ExpandedText="Popular Groups &#9650" CollapseControlID="popularHead" ExpandControlID="popularHead"
                            TargetControlID="popularContent" ExpandedImage="../images/collapse.jpg" CollapsedImage="../images/expand.jpg"
                             ImageControlID="img1" Collapsed="true">
                        </cc1:CollapsiblePanelExtender>
                    </asp:Panel>
                    <br />
                    <br />
                    <asp:Panel ID="NewsGroup" runat="server">
                        <asp:Panel ID="NewsHead" runat="server" CssClass="popular_head">
                        <asp:Image ID="img2" runat="server" />
                            <asp:Label ID="labNews" Text="News Groups" runat="server"></asp:Label>
                        </asp:Panel>
                        <asp:Panel ID="NewsContent" runat="server" CssClass="popular_content">
                            <asp:LinkButton runat="server" ID="LinkButton8" Text="Pretty Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton9" Text="Nest Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton10" Text="Cool Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton11" Text="Silly Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton12" Text="Pretty Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton13" Text="Nest Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton14" Text="Cool Images" /><br />
                            <asp:LinkButton runat="server" ID="LinkButton15" Text="Silly Images" /><br />
                        </asp:Panel>
                        <cc1:CollapsiblePanelExtender ID="cpe2" runat="server" TextLabelID="labNews" CollapsedText="News Groups &#9660"
                            ExpandedText="News Groups &#9650" CollapseControlID="NewsHead" ExpandControlID="NewsHead"
                            TargetControlID="NewsContent" ExpandedImage="../images/collapse.jpg" CollapsedImage="../images/expand.jpg"
                             ImageControlID="img2" Collapsed="true">
                        </cc1:CollapsiblePanelExtender>
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>

 

有兴趣的朋友可以试一下，这里只供参考！