Ajax Toolkit Control ——CollapsiblePanelExtender(隐藏&显示效果)
【引用】“This extender targets any ASP.NET Panel control.You specify which control or controls on the page should act as the open and close controllers for the panel.”
属性名 | 描述 |
TargetControlID | 要使用展开和折叠效果的Panel ID |
CollapseSize | 目标折叠时的大小(单位px) |
ExpandedSize | 目标展开时的大小(单位px) |
Collapsed(true or false) | 目标呈现时是否折叠,false(default)--展开,true--折叠 |
AutoCollapse | 当鼠标移出“展开”的Panel时是否自动折叠,false(d)--不折叠,true--折叠 |
AutoExpand | 当鼠标进入“折叠”的Panel时是否自动展开,false(d)--不展开,true--展开 |
ScrollContents | true--当内容较多时出现滚动条,false--将修剪内容 |
ExpandControlID | 可以点击来展开Panel的控件ID |
CollapseControlID | 可以点击来折叠Panel的控件ID |
CollapsedText | Panel处于折叠状态时的文字,比如:"Show Details..." |
ExpandedText | Panel处于展开状态时的文字,比如:"Hide Details..." |
TextLabelID | 用来显示Panel的状态的Label控件ID,即CollapsedText and ExpandedText的内容 |
ImageControlID | 跟TextLabelID差不多,显示Panel的状态的图片 |
ExpandedImage | Panel展开时的图片url |
CollapsedImage | Panel折叠时的图片url |
ExpandDirection | 展开方向(Horizontal or Vertical) |
CollapsiblePanelExtender控件的效果也就是隐藏和显示特定控件Panel里的内容,跟Accordion是同一类控件,只是没有那些淡化效果。
示例主要代码:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="Panel1" CssClass="panel1" runat="server">
<p>
panel panel panel panel panel
</p>
</asp:Panel>
<asp:Label ID="Label1" runat="server">这里用来显示Panel的状态</asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">Click Here</asp:LinkButton><asp:Image
ID="Image1" runat="server" />
<asp:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel1" CollapsedSize="0"
ExpandedSize="300" Collapsed="true" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1"
AutoCollapse="False" AutoExpand="False" ScrollContents="True" TextLabelID="Label1"
CollapsedText="Show Details..." ExpandedText="Hide Details..." ImageControlID="Image1"
ExpandedImage="~/images/gotop.png" CollapsedImage="~/images/down.png" ExpandDirection="Vertical" />
更多属性请参见>>@http://www.asp.net/ajaxlibrary/act_CollapsiblePanel_Reference.ashx