zoukankan      html  css  js  c++  java
  • CollapsiblePanel控件

    CollapsiblePanel控件------(可收缩面版)
    功能:
        可以让页面中的某个区域变得可折叠,即用户可以根据喜好展开或折叠其中的内容。

     属性:
               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

    实例代码:
    <head id="Head1" runat="server">
        
    <title>示范可收缩面版(CollapsiblePanel)</title>   

    </head>
    <body>
        
    <form id="CollapsiblePanelForm" runat="server">
            
    <asp:ScriptManager ID="sm" runat="server" />
            
    <div >示范可收缩面版(CollapsiblePanel)<br />
            
    </div>
            
    <div>
        请在
    <strong>“What is ASP.NET AJAX?”</strong>这个 Panel 上,按下鼠标左键来收缩或展开详细的内容介绍。
      
    </div>
            
    <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px" Width="500px" Style=" background-color:Gray;overflow:hidden;"> 
                
    <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                    
    <div style="float: left;">What is ASP.NET AJAX?</div>
                    
    <div style="float: left; margin-left: 20px;">
                        
    <asp:Label ID="Label1" runat="server">(Show Details)</asp:Label>
                    
    </div>
                    
    <div style="float: right; vertical-align: middle;">                    
                        
    <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/Expand.gif" AlternateText="(Show Details)"/>
                    
    </div>
                
    </div>
            
    </asp:Panel>
            
    <asp:Panel ID="Panel1" runat="server" Height="0" Width="500px">
                
    <br />
                          
    <input  type="image" src="Images/AJAX.gif" alt="ASP.NET AJAX" style="border- 0px;" align="right" type="image">
    ASP.NET AJAX is a free framework for building a new generation of
    richer, more interactive, highly personalized cross-browser web
    applications. This new web development technology from Microsoft
    integrates cross-browser client script libraries with the ASP.NET 2.0
    server-based development framework. In addition, ASP.NET AJAX offers
    you the same type of development platform for client-based web pages
    that ASP.NET offers for server-based pages. And because ASP.NET AJAX is
    an extension of ASP.NET, it is fully integrated with server-based
    services. ASP.NET AJAX makes it possible to easily take advantage of
    AJAX techniques on the web and enables you to create ASP.NET pages with
    a rich, responsive UI and server communication. However, AJAX isn't
    just for ASP.NET. You can take advantage of the rich client framework
    to easily build client-centric web applications that integrate with any
    backend data provider and run on most modern browsers. 
    </p>
            
    </asp:Panel>
            
           
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
            TargetControlID
    ="Panel1"
            ExpandControlID
    ="Panel2"
            CollapseControlID
    ="Panel2" 
            Collapsed
    ="true"
            TextLabelID
    ="Label1"
            ImageControlID
    ="Image1"    
            ExpandedText
    ="(Hide Details)"
            CollapsedText
    ="(Show Details)"
            ExpandedImage
    ="~/Images/Collapse.gif"
            CollapsedImage
    ="~/Images/Expand.gif"
            SuppressPostBack
    ="true" />
        
    </form>
    </body>
    </html>


    运行结果:
            
  • 相关阅读:
    ip地址和子网掩码
    Mysql 进阶查询 (select 语句的高级用法)
    MHA高可用配置及故障切换
    数据库的备份与恢复需要修改
    每天一分钟,了解mysql索引,事务与存储引擎
    mysql基础命令详解
    带你走进mysql数据库
    Spring XML无自动提示
    Spring环境搭建错误
    读书笔记_java设计模式深入研究 第十一章 装饰器模式 Decorator
  • 原文地址:https://www.cnblogs.com/abcdwxc/p/944553.html
Copyright © 2011-2022 走看看