Terry's blog

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

博客园 首页 新随笔 联系 订阅 管理
  299 Posts :: 1 Stories :: 149 Comments :: 49 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 王晓成 阅读(969) 评论(5)  编辑 收藏 网摘 所属分类: Ajax

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      
谢谢了
  回复  引用  查看    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-05-29 17:19 编辑过
Google站内搜索
[推荐职位]上海盛大网络招聘架构师



China-pub 计算机图书网上专卖店！6.5万品种 2-8折！
近千种 9-95 新二手计算图书火热销售中！
开发者征途系统新作：《设计模式——基于C#的工程化实现及扩展》

相关文章:

相关链接:

最新IT新闻:
一个美国人在上海
未来应用Web化 Windows应用将逐渐淡出
Windows 7 Beta 1 可以下载了
MySpace推出应用小工具 电视也可访问社交网络
Borland前CEO出任VMware首席运营官