CollapsiblePanel控件

CollapsiblePanel控件

CollapsiblePanel控件------（可收缩面版）
功能：
    可以让页面中的某个区域变得可折叠，即用户可以根据喜好展开或折叠其中的内容。

属性：
           TargetControlID：该扩展器目标控件ID，即将要实现折叠、展开功能的控件的ID
            ExpandControlID：指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将展开
            CollapseControlID:指定一个服务器控件的ID，当用户点击该控件时，该扩展器的目标Panel控件将折叠
            Collapsed：目标Panel控件的初始化状态，true代表折叠，false代表展开
            TextLabelID：指定一个服务器Label控件的ID，用来显示此时目标Panel控件的折叠/展开状态
            ImageControlID：指定一个服务器端Image控件的ID，用来告知用户此时目标Panel控件的折叠、展开状态
            ExpandedText：当目标Panel控件为展开状态时，TextLabelID属性所指定的Label控件中的文字
            CollapsedText：当目标Panel控件为折叠时，TextLabelID属性所指定的Label控件中的文字
            ExpandedImage：当目标Panel控件为展开状态时，ImageControlID属性所指定的Image控件中图片的URL
            CollapsedImage：当目标Panel控件为折叠状态时，ImageControlID属性所指定的Image控件中图片的URL

实例代码：

<head id="Head1" runat="server">
    <title>示范可收缩面版（CollapsiblePanel）</title>

</head>
<body>
    <form id="CollapsiblePanelForm" runat="server">
        <asp:ScriptManager ID="sm" runat="server" />
        <div >示范可收缩面版（CollapsiblePanel）<br />
        </div>
        <div>
    请在<strong>“What is ASP.NET AJAX?”</strong>这个 Panel 上，按下鼠标左键来收缩或展开详细的内容介绍。
  </div>
        <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px" Style=" background-color:Gray;overflow:hidden;">
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">What is ASP.NET AJAX?</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1" runat="server">(Show Details)</asp:Label>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/Expand.gif" AlternateText="(Show Details)"/>
                </div>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" Height="0" Width="500px">
            <br />
                      <input  type="image" src="Images/AJAX.gif" alt="ASP.NET AJAX" style="border- 0px;" align="right" type="image">
ASP.NET AJAX is a free framework for building a new generation of
richer, more interactive, highly personalized cross-browser web
applications. This new web development technology from Microsoft
integrates cross-browser client script libraries with the ASP.NET 2.0
server-based development framework. In addition, ASP.NET AJAX offers
you the same type of development platform for client-based web pages
that ASP.NET offers for server-based pages. And because ASP.NET AJAX is
an extension of ASP.NET, it is fully integrated with server-based
services. ASP.NET AJAX makes it possible to easily take advantage of
AJAX techniques on the web and enables you to create ASP.NET pages with
a rich, responsive UI and server communication. However, AJAX isn't
just for ASP.NET. You can take advantage of the rich client framework
to easily build client-centric web applications that integrate with any
backend data provider and run on most modern browsers. </p>
        </asp:Panel>

       <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
        TargetControlID="Panel1"
        ExpandControlID="Panel2"
        CollapseControlID="Panel2"
        Collapsed="true"
        TextLabelID="Label1"
        ImageControlID="Image1"
        ExpandedText="(Hide Details)"
        CollapsedText="(Show Details)"
        ExpandedImage="~/Images/Collapse.gif"
        CollapsedImage="~/Images/Expand.gif"
        SuppressPostBack="true" />
    </form>
</body>
</html>

运行结果：
相关阅读:
如何在Ubuntu 20.04 LTS Focal Fossa上安装Webmin
如何在Linux服务器上创建一个具有管理权限的新用户？
如何在Ubuntu 20.04 LTS上安装Apache Subversion
error more than one devices and emulator
深度学习+CRF解决NER问题
 word2vec训练&IC分词(待)
tensorflow基础
 (转)pycharm快捷键
 Python包的相对导入时出现问题解决
 python工具使用笔记
原文地址：https://www.cnblogs.com/abcdwxc/p/944553.html