作者在 2008-05-02 15:53:51 发布以下内容
控件名:collapsiblepanelextender
效果即用途:用来做可折叠的面板
控件属性:
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
eg:
1.托两个panel和一个collapsiblepanelextender控件
2.在第一个panel中放一个label和一个image控件。
3.设置collapsiblepanelextender控件的targetcontrolid为第二个panel
4.在第二个panel控件的属性中找到collapsiblepanelextender1(collapsiblepanelextender)属性,根据实际情况设置属性。
eg:
<asp:Panel ID="Panel1" runat="server" BackColor="Menu" Font-Bold="True" Font-Names="Arial Black"
ForeColor="Red" Height="26px" "246px">
关于作者
<asp:Label ID="Label1" runat="server" Text="收起"></asp:Label>
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/shou.gif" /></asp:Panel>
<asp:Panel ID="Panel2" runat="server" BackColor="InactiveCaption" Height="142px"
"244px">
作者名:XXX<br />
性别:XX<br />
爱好:XXXXXX<br />
出生年月:XXXXXXX<br />
籍贯:XXXXXXX<br />
出版书籍:XXXXXXXX<br />
联系方式:XXXXXXXXXX<br />
</asp:Panel>
<cc1:collapsiblepanelextender id="CollapsiblePanelExtender1" runat="server" collapsecontrolid="Panel1"
collapsedimage="~/img/zhan.gif" collapsedtext="展开" expandcontrolid="Panel1" expandedimage="~/img/shou.gif"
expandedtext="收起" imagecontrolid="Image1" targetcontrolid="Panel2" textlabelid="Label1"></cc1:collapsiblepanelextender>
运行效果图为:


效果即用途:用来做可折叠的面板
控件属性:
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
eg:
1.托两个panel和一个collapsiblepanelextender控件
2.在第一个panel中放一个label和一个image控件。
3.设置collapsiblepanelextender控件的targetcontrolid为第二个panel
4.在第二个panel控件的属性中找到collapsiblepanelextender1(collapsiblepanelextender)属性,根据实际情况设置属性。
eg:
<asp:Panel ID="Panel1" runat="server" BackColor="Menu" Font-Bold="True" Font-Names="Arial Black"
ForeColor="Red" Height="26px" "246px">
关于作者
<asp:Label ID="Label1" runat="server" Text="收起"></asp:Label>
<asp:Image ID="Image1" runat="server" ImageUrl="~/img/shou.gif" /></asp:Panel>
<asp:Panel ID="Panel2" runat="server" BackColor="InactiveCaption" Height="142px"
"244px">
作者名:XXX<br />
性别:XX<br />
爱好:XXXXXX<br />
出生年月:XXXXXXX<br />
籍贯:XXXXXXX<br />
出版书籍:XXXXXXXX<br />
联系方式:XXXXXXXXXX<br />
</asp:Panel>
<cc1:collapsiblepanelextender id="CollapsiblePanelExtender1" runat="server" collapsecontrolid="Panel1"
collapsedimage="~/img/zhan.gif" collapsedtext="展开" expandcontrolid="Panel1" expandedimage="~/img/shou.gif"
expandedtext="收起" imagecontrolid="Image1" targetcontrolid="Panel2" textlabelid="Label1"></cc1:collapsiblepanelextender>
运行效果图为:




————————————————————