ASP.NET AJAX学习笔记之:CollapsiblePanel---可折叠的面板

控件用途：
     让某个控件的内容变得可折叠．
常用属性：
     TargetControlID:目标控件：要实现折叠／展开控件的ＩＤ;
     ExpandControlID:一个服务器控件，该控件的作用是：点击该控件即可展开TargetControlID指定的控件;
     CollapseControlID:一个服务器控件,该控件的作用是：点击该控件即可将TargetControlID指定的控件进行折叠;
     通常ExpandControlID和CollapseControlID都指向同一个服务器控件,以上三个控件便可实现基本的折叠功能;

Collapsed:设置目标控件的初始置是"展开"还是"折叠"(true:折叠,false:展开);
用文字表示展开／折叠的状态：(锦上添花功能)
     TextLabelID:指定一个Label控件用来显示目标控件当前＂展开／折叠＂的状态(通常是要展形内容的标题)；
　　ExpandedText：设置TextLabelID指定的Label控件在展开时显示的文字．例如：＂关闭面板＂;
      CollapsedText:  设置TextLabelID指定的Label控件在折叠时显示的文字．例如：＂展开面板＂;
同理以可用图片控件来表示展开／折叠的状态,也有三个控件
      ImageControlID：指定一个Image控件用来显示目标控件当前＂展开／折叠＂的状态；
      ExpandedImage：设置TextLabelID指定的Image控件在展开时显示的图片;
      CollapsedImage：设置TextLabelID指定的Image控件在折叠时显示的图片;

例子演示：
    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    控制展开／折叠的面板
    <asp:Panel ID="Panel1" runat="server" >
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">训练营残酷令巴蒂尔怀念裁判 火箭首演姚麦是主角</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1" runat="server">(展开看详细内容)</asp:Label> 
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/images/expand_blue.jpg" AlternateText="(展开看详细内容...)"/>  
                </div>
            </div>
        </asp:Panel>
    目标要展开的面板
         <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel" Height="0">
            <br />
            <p>
                新浪体育讯　北京时间10月9日消息，对于巴蒂尔来说，什么使他整个夏天最为怀念的呢？这位火箭队外线最为重要的防守球员的回答一定让你大吃一惊，他最怀念的竟然是裁判。在一周的训练营结束后，尤其是经历了对抗性训练，他已经对于NBA的裁判新赛季苛刻的判罚做好了准备。
“当你在训练营的时候，你要面对需要那种桀骜不驯的年轻人，他们不断的扯你阻止你并和你卡位，”巴蒂尔说，“这样的情况不会在常规赛中出现，不过这样的经历对于你提前适应常规赛裁判的尺度很有帮助，在训练营里面尺度总是很宽松的。”
            </p>
        </asp:Panel>

主角登场：CollapsiblePanel
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
        TargetControlID="Panel2"
        ExpandControlID="Panel1"
        CollapseControlID="Panel1"
        Collapsed="True"
        TextLabelID="Label1"
        ImageControlID="Image1"   
        ExpandedText="(关闭)"
        CollapsedText="(展开)"
        ExpandedImage="~/images/collapse_blue.jpg"
        CollapsedImage="~/images/expand_blue.jpg"
        SuppressPostBack="true"
　　 />
   
　　晚安，明天晚上继续!

posted on 2007-10-09 23:10 了无痕 阅读(...) 评论(...) 编辑 收藏