AJAX ControlToolkit学习日志-CollapsiblePanel(6)
CollapsiblePanel控件用于实现类似于XP中的可折叠的面板功能。
首先看一个示例:
1)新建一个ASP.NET AJAX-Enabled Web Project工程项目,命名为CollapsiblePanel1。
2)在Default.aspx中拖放两个Panel。其ID分别为CollapsibleHeaderPanel和CollapsibleContentPanel。视图如下:
3)在CollapsibleHeaderPanel中添加一个Label和ImageButton,用于提示可以展开或折叠。视图如下:
4)在页面中添加一个CollapsiblePanel。并对其的一些属性进行设定。视图如下:
CollapsiblePanel的代码如下:
a)TargetControlID:该属性指定一个Panel,该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
b)CollapseControlID/ExpandControlID:该属性指定控制折叠/扩展的控件ID。
c)ExpandDirection:指定Panel的扩展方向。
d)TextLabelID:指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
e)CollapasedText/ExpandedText:Panel折叠/扩展时的文本。
f)Collapsed:指定页面导入时Panel是折叠还是扩展。
g)ImageControlID:指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
h)ExpandedImage/CollapsedImage:在扩展/折叠时显示不同的图像。
i)SuppressPostBack:禁止回传。
页面所有代码如下:
效果预览:
首先看一个示例:
1)新建一个ASP.NET AJAX-Enabled Web Project工程项目,命名为CollapsiblePanel1。
2)在Default.aspx中拖放两个Panel。其ID分别为CollapsibleHeaderPanel和CollapsibleContentPanel。视图如下:
3)在CollapsibleHeaderPanel中添加一个Label和ImageButton,用于提示可以展开或折叠。视图如下:
4)在页面中添加一个CollapsiblePanel。并对其的一些属性进行设定。视图如下:
CollapsiblePanel的代码如下:
1 <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
2 TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
3 ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
4 </cc1:CollapsiblePanelExtender>
下面对其代码进行一点解释:2 TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
3 ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
4 </cc1:CollapsiblePanelExtender>
a)TargetControlID:该属性指定一个Panel,该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
b)CollapseControlID/ExpandControlID:该属性指定控制折叠/扩展的控件ID。
c)ExpandDirection:指定Panel的扩展方向。
d)TextLabelID:指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
e)CollapasedText/ExpandedText:Panel折叠/扩展时的文本。
f)Collapsed:指定页面导入时Panel是折叠还是扩展。
g)ImageControlID:指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
h)ExpandedImage/CollapsedImage:在扩展/折叠时显示不同的图像。
i)SuppressPostBack:禁止回传。
页面所有代码如下:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Panel ID="CollapsibleHeaderPanel" BorderWidth="1px" BorderColor="Blue" Height="16px" runat="server" Width="595px">
<div>gjeojgoejgoejgojgoejegojoegeg
<asp:Label ID="label1" runat="server"></asp:Label>
<asp:ImageButton ID="imageButton1" ImageUrl="~/expand_blue.jpg" AlternateText="Show Details" runat="server" /></div>
<div>
</div>
</asp:Panel>
<asp:Panel ID="CollapsibleContentPanel" BorderWidth="1px" BorderColor="ControlDark" Height="0px" runat="server">
<p style="overflow:hidden">fdddddddddddddddddddddddddddddfefeeeeeeeeeeeee</p></asp:Panel>
</div>
<div>
<br />
<br />
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
</cc1:CollapsiblePanelExtender>
</div>
</form>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Panel ID="CollapsibleHeaderPanel" BorderWidth="1px" BorderColor="Blue" Height="16px" runat="server" Width="595px">
<div>gjeojgoejgoejgojgoejegojoegeg
<asp:Label ID="label1" runat="server"></asp:Label>
<asp:ImageButton ID="imageButton1" ImageUrl="~/expand_blue.jpg" AlternateText="Show Details" runat="server" /></div>
<div>
</div>
</asp:Panel>
<asp:Panel ID="CollapsibleContentPanel" BorderWidth="1px" BorderColor="ControlDark" Height="0px" runat="server">
<p style="overflow:hidden">fdddddddddddddddddddddddddddddfefeeeeeeeeeeeee</p></asp:Panel>
</div>
<div>
<br />
<br />
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" TargetControlID="CollapsibleContentPanel" CollapseControlID="CollapsibleHeaderPanel" ExpandControlID="CollapsibleHeaderPanel" ExpandDirection="Vertical"
TextLabelID="label1" CollapsedText="Hide Details" ExpandedText="Show Details" Collapsed="true"
ImageControlID="imageButton1" CollapsedImage="expand_blue.jpg" ExpandedImage="collapse_blue.jpg" SuppressPostBack="true" runat="server">
</cc1:CollapsiblePanelExtender>
</div>
</form>
效果预览: