Мой ASP.NET Accordion не будет анимировать изменения панели при срабатывании флажков - PullRequest
Новая
       18

Мой ASP.NET Accordion не будет анимировать изменения панели при срабатывании флажков

3 голосов
/ 01 мая 2010

Моя аккордеонная панель в разметке: 

<ajaxToolkit:Accordion 
ID="MyAccordion"
runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
    <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
        <Header>BBBBBBBBBB</Header>
        <Content>
        FFFFFFFF:<br /><br />
        <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
            <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
        </td><td width="300">
            <asp:CheckBox ID="CB_Verification0" runat="server" AutoPostBack="true" /> Verify
        </td></tr>
        </table>
        </Content>

    </ajaxToolkit:AccordionPane>

    <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
        <Header>GGGGGGGGG</Header>
        <Content>
        HHHHHHHHHH:<br /><br />
            <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
            </td><td width="300">
                <asp:CheckBox ID="CB_Verification1" runat="server" AutoPostBack="true" /> Verify
            </td></tr>
            </table>
        </Content>
    </ajaxToolkit:AccordionPane>
</Panes>

Вот как я справляюсь с флажком: 

Private Sub CB_Verification0_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CB_Verification0.CheckedChanged
    MyAccordion.SelectedIndex = 1
End Sub

Я заставляю панели меняться правильно, просто они не анимируются так, как при нажатии на заголовки. Когда я нажимаю флажок, чтобы изменить панель, панель просто мгновенно исчезает, а новая появляется мгновенно, но я хочу, чтобы она была анимированной, как если бы я щелкала заголовки. Есть ли способ вызвать анимацию при принудительном изменении видимой панели?

Ответы [ 2 ]

2 голосов
/ 05 мая 2010

Вы можете сделать это ... все на стороне клиента, ваша проблема в том, что когда он отправляет обратно, он обновляется до первого ... поэтому вы должны отключить автозапуск назад ... вот пример, который работает .. 

<script language="javascript" type="text/javascript">

    function toggle(id) {
        var accordion = $get("<%= MyAccordion.ClientID%>");
        accordion.AccordionBehavior.set_SelectedIndex(id);

    }
</script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
        AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
        RequireOpenedPane="false" SuppressHeaderPostbacks="true">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
                <Header>
                    BBBBBBBBBB</Header>
                <Content>
                    FFFFFFFF:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox1" type="checkbox" onclick="javascript:toggle(1);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
                <Header>
                    GGGGGGGGG</Header>
                <Content>
                    HHHHHHHHHH:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox2" type="checkbox" onclick="javascript:toggle(0);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
    </ajaxToolkit:Accordion>
2 голосов
/ 03 мая 2010

Это потому что вы меняете панель на стороне сервера, поэтому страница отправляется клиенту с уже развернутой панелью. Вы можете зарегистрировать скрипт на своем постбеке, чтобы инициировать изменение на стороне клиента.

Взгляните на этот Блог

...