Ajax Control Toolkit 34个服务器端控件(1)

 

1. Accordion

【功能概述】
Accordion 可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane，每一个AccordionPane的template里包括了对其Header和Content的定义。我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel，还可以控制哪一个Panel展开。

经常可以见到类似的效果，比如QQ、Msn好友分类的折叠效果。

【细节】

(1) 不要把Accordion放在Table中而又把 FadeTransitions 设置为True，这将引起布局混乱
    (2) 在AccordionPane模板中的Content中可以定义任何Web元素，表现的就像一个容器

(3) AccordionPane 内容模板自动改变大小有三种AutoSize modes ：None(推荐) Limit  Fill

(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender') 这里找到的是Behavior.什么是Behavior呢？在Asp.net Ajax框架中包含一组动作并完成一个功能. Accordion的一个Behavior就是淡入淡出.

找到Behavior的引用，behavior.set_FadeTransitions()  behavior.get_FadeTransitions()的方式来实现具体某一个Behavior的访问和修改.

var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender'); 这种写法是不好的，我们在自动测试的页面中发现了更好的写法： var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");

【代码示意】

      <script language="javascript" type="text/javascript">
            function toggleFade()  {
             var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                if (behavior)  {        
                    behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
                }
            }
            function changeAutoSize()  {
             var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                var ctrl = $get('autosize');    // 这里找的是下拉列表控件,不是Behavior
                if (behavior)  {
                    var size = 'None';   // 这里顺便看看怎么使用Select
                    switch (ctrl.selectedIndex)  {
                        case 0 :
                            behavior.get_element().style.height = 'auto';
                            size = AjaxControlToolkit.AutoSize.None;
                            break;

                        case 1 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Fill;
                            break;
                        case 2 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Limit;
                            break;
                    }
                    behavior.set_AutoSize(size);
                }
                if (document.focus)  {
                    document.focus();
                }
            }
        </script>

 <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
            TransitionDuration="250" AutoSize="None">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <a href="" οnclick="return false;" class="accordionLink">1. Accordion</a></Header>
                    <Content>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion> 

  2. AlwaysVisibleControl

【功能概述】
 AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面或者改变浏览器大小时总是可见的。它可以扩展任意一个Asp.net 控件，并可按照要求设置水平 竖直方向上的相对距离.

最多的应用是在线阅读的目录和不胜其烦的浮动小广告。

【细节】

(1)   避免控件闪烁，要扩展的控件要使用absolutely position

(2)   HorizontalSide="Center" VerticalSide="Top" 使用这个方式控制浮动的位置

(3)   Var label = ocument.getElementById('ctl00_SampleContent_currentTime'); 这行代码我们可以使用更简单的方法：
     var label = $get('ctl00_SampleContent_currentTime');

【代码示意】

  代码示意： 
    <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top"  TargetControlID="Panel1" runat="server">