zoukankan      html  css  js  c++  java
  • AjaxControlToolkit CollapsiblePanelExtender用法

    CollapsiblePanelExtender主要用于实现展开和收缩效果

    具体用法如下:

      在界面中增加控件,如下图:

     

    源码如下:注意背景为黄色的部分。

    <head runat="server">
        
    <title>无标题页</title>
        
    <style>
        .collapsePanel 
    {
       
                background-color
    :white;
            
    }
            
           .collapsePanelHeader
    {   
                width
    :100%;      
                height
    :30px;
                background
    :#666;
                color
    :#11BBBB;
                font-weight
    :bold;
            
    }
        
    </style>
    </head>
    <body>
        
    <form id="form1" runat="server">
            
    <div>
                
    <asp:ScriptManager ID="ScriptManager1" runat="server">
                
    </asp:ScriptManager>
                
    <br />
                
    <asp:Panel ID="Panel1" runat="server" Height="0px" Width="125px" CssClass="collapsePanelHeader">
                    
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></asp:Panel>
                
    <br />
                
    <div>
                    
    <asp:Panel ID="Panel2" runat="server" Width="125px" BackColor="AliceBlue">
                        sdfads
    <br />
                        sdfads
    <br />
                        sdfads
    <br />
                        sdfads
    <br />
                        sdfads
    <br />
                        sdfads
    <br />
                    
    </asp:Panel>               
                
    </div>
                
                 测试页面下的内容
              
      <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="Panel2"
                    CollapseControlID
    ="Panel1" ExpandControlID="Panel1" ExpandedText="隐藏内容……" CollapsedText="显示内容……"
                    AutoExpand
    ="false" AutoCollapse="false" ScrollContents="false" Collapsed="false"
                    TextLabelID
    ="Label1" ExpandDirection="Vertical">
                
    </cc1:CollapsiblePanelExtender>

            
    </div>
        
    </form>

     这样就ok了,运行时单击Label1试一下效果.

    例子下载地址:https://files.cnblogs.com/scottckt/AjaxCPE.rar

    说明:

    TargetControlID:被控制的panel

    CollapsedSize:目标收缩后的大小

    ExpandedSize:目标展开后的大小

    Collapsed:true时为展开,false时为收缩

    Scroll Contents:值为true时,且目标panel的大小小于内容的大小时自动添加滚动条。

    ExpandControlID/CollapseControlID:点击这些控件会展开或收缩目标panel。

    TextLabelID:指示一个label控件的ID,该label的值会根据目标panel的状态而改变。

    CollapsedText:设置当目标panel为收缩时TextLabelID所指示的lable的值。

    ExpandedText:设置当目标panel为展开时TextLabelID所指示的lable的值。

    ImageControlID:指示一个image控件。该控件会根据目标panel状态的不同而改变图片。

    CollapsedImage:指示目标panel为收缩时ImageControlID所指示的image的path。

    ExpandedImage:指示目标panel为展开时ImageControlID所指示的image的path。

    ExpandDirection:指示目标panel的展开收缩方向,可以是水平或垂直展开收缩。

  • 相关阅读:
    Liunx学习总结(三)--用户和用户组管理
    Liunx学习总结(二)--目录和文件管理
    Markdown表格宽度调整
    Liunx学习总结(一)--初识 Liunx
    好看的404页面
    qt打印输出到控制台
    平台 DllRegisterServer调用失败
    linux下编译安装SDL2和ffmpeg
    ffmpeg函数05__vcodec_decode_video2()
    ffmpeg函数04__v_register_output_format()
  • 原文地址:https://www.cnblogs.com/scottckt/p/1394924.html
Copyright © 2011-2022 走看看