Terry's blog

是建高楼大厦，还是搭窝棚？--------我要建高楼大厦。"只要决心成功，失败就不会把我们击垮" -------《羊皮卷》

博客园 首页 新随笔 联系 订阅 管理
  337 Posts :: 1 Stories :: 230 Comments :: 51 Trackbacks
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-width: 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>


运行结果：
        
posted on 2007-10-31 16:54 王晓成 阅读(1862) 评论(5) 编辑 收藏

Feedback

#1楼 2007-10-31 19:58 小小飞      
谢谢了。。
　回复　引用　查看　  

#2楼[楼主] 2007-11-01 09:56 王晓成      
不客气，只要大家把自己所了解的拿出来给大家分享，我想我们互相提高的会更快。
　回复　引用　查看　  

#3楼 2007-11-06 20:53 LAU[未注册用户]
VS2005里没有这个控件啊?
　回复　引用　  

#4楼[楼主] 2007-11-07 14:59 王晓成      
vs2005没有集成ajax。你需要安装ASPAJAXCTP.msi和ASPAJAXExtSetup.msi。如果你用的是vs2008beta2，就已经集成了。
　回复　引用　查看　  

#5楼 2008-12-02 08:53 UouHt      
谢谢了
　回复　引用　查看　  

最新IT新闻:
· 美国空军拟最多购买1.8万台iPad 2
· 伊朗封杀Gmail和Facebook等互联网服务
· 分析称专利之争让谷歌苹果两败俱伤
· Android平台发现新型手机病毒Rootsmart
· HTC首款Android4.0手机大曝光
» 更多新闻...