ajax控件之collapsiblepanelextender(可折叠面板)

作者在 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>

运行效果图为:



 
 
————————————————————
技术日志 | 阅读 2510 次
文章评论,共0条
游客请输入验证码