Asp.net Ajax 服务器控件使用 --- 1.Accordion

 Accordion Demonstration

Accordion控件
     <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="" onclick="return false;" class="accordionLink">1. Accordion</a></Header>
                    <Content>
                      在这里添加任意内容
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <a href="" onclick="return false;" class="accordionLink">2. What is ASP.NET AJAX?</a></Header>
                    <Content>
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif" AlternateText="ASP.NET AJAX"
                            ImageAlign="right" />
                        <%= GetContentFillerText()%>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

对这个控件还有两个扩展：
 1.淡入淡出效果
 2.AutoSize模式选择

  <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');
                if (behavior) {
                    var size = 'None';
                    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>

        Fade Transitions:
        <input id="fade" type="checkbox" onclick="toggleFade();" value="false" /><br />
        AutoSize:
        <select id="autosize" onchange="changeAutoSize();">
            <option value="0" selected>None</option>
            <option value="1">Fill</option>
            <option value="2">Limit</option>
        </select>