AJAX Toolkits -- CollapsiblePanel

在AJAX Toolkits中有个CollapsiblePanel扩展控件，该扩展功能仅限于Panel控件。

通过该控件可以实现Panel的收缩，该功能是由外部驱动的。其包含以下属性：

• TargetControlID - Panel的控件编号
• CollapsedSize - 数字型，当Panel属于折叠状态是的高度，一般来说，该属性都不设置，默认为0
• ExpandedSize - 数字型，当Panel属于折叠状态是的高度，一般来说，该属性都不设置，因为他会取原先Panel的高度
• Collapsed - 布尔型，初始状态下是否为折叠状态，默认为false
• AutoCollapse - 布尔型，当鼠标移动到Panel，是否自动折叠，默认为false.
• AutoExpand - 布尔型，当鼠标移动到Panel，是否自动展开，默认为false.
• ScrollContents - 布尔型，当内容大于Panel本身时，如果设置True就会出现滚轮，如果为False，则全部显示
• ExpandControlID/CollapseControlID - 控件的ID，通过点击该控件可以实现对Panel的折叠和展开。如果两者设置为同一控件，那么系统会自动循环执行
• TextLabelID - Label控件的编号，其是用来显示当前Panel的状态信息。该信息与后面的CollapsedText和ExpandedText关联。
• CollapsedText - 当Panel处于折叠状态下，在状态显示控件（TextLabelID所对应的控件）上的内容。
• ExpandedText - 当Panel处于打开状态下，在状态显示控件（TextLabelID所对应的控件）上的内容。
• ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.
• CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed
• ExpandedImage - The path to an image used by ImageControlID when the panel is expanded
  （上述三项我没有使用）
• ExpandDirection - 有"Vertical" 和"Horizontal"两个选项，用来确定Panel展开或折叠的方向
• SuppressPostBack - 将该属性设置为true，这样panal在展開時才不會postback，不会刷页面

代码示例：

 

Code
 1<div style="width: 300px">
 2        <asp:Panel ID="Panel1" runat="server" Style="background-color: #AAFFFF">
 3            <div style="padding: 10px">
 4                First Name:
 5                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
 6                Last Name:
 7                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
 8                <hr />
 9                <asp:Panel ID="CollapseHeader" runat="server" Style="cursor: pointer; text-align: left">
10                    <asp:Label ID="Label1" runat="server" Text="Label">Show Details</asp:Label>
11                </asp:Panel>
12                <asp:Panel ID="Panel2" runat="server" Style="overflow: hidden; height: 0px; text-align:left">
13                    &nbsp;&nbsp; hahahahahahahah hahahahahhahahah hahahahhahahahha</asp:Panel>
14                <cc1:CollapsiblePanelExtender ID="Panel2_CollapsiblePanelExtender" 
15                    runat="server" Enabled="True" TargetControlID="Panel2"
16                    Collapsed="true"
17                    CollapsedText="Show Details"
18                    ExpandedText="Hide Details"
19                    CollapseControlID="CollapseHeader"
20                    ExpandControlID="CollapseHeader"
21                    SuppressPostBack="true"
22                    >
23                </cc1:CollapsiblePanelExtender>
24            </div>
25        </asp:Panel>
26    </div>

转载于:https://www.cnblogs.com/lx0831/archive/2009/01/05/1369428.html