How to handle the Accordion's SelectedIndexChanged event at client side?

最新推荐文章于 2024-07-23 11:32:13 发布

aifengyi6776

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量62

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Zhi-QiangNi/archive/2009/02/09/1386977.html

版权

Some programmers would like to find a function to handle the Accordion’s SelectedIndexChanged event. As we all know, the Accordion’s Client behavior has provided such two events:

Code
add_selectedIndexChanged(handler)
add_selectedIndexChanging(handler)

Now, let's have a look at how to add a confirmation when the Accordion pane header is clicked.

Code
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestHandleSelectedChangedEvent.aspx.vb"
    Inherits="SoluTest_Accordion.TestHandleSelectedChangedEvent" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .accordionHeader
        {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
            height: 10px;
        }
        .accordionHeaderSelect
        {
            border: 1px solid #2F4F4F;
            color: red;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
            height: 10px;
        }
        .accordionContent
        {
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
        }
    </style>

    <script type="text/javascript">
        var accordion;
        var handlerFired;
        function pageLoad() {

            accordion = $find("Accordion1_AccordionExtender"); //parameter should be the ID_AccordionExtender
            accordion.add_selectedIndexChanged(selectedIndexChangedHandler)
        }
        function selectedIndexChangedHandler(sender, args) {
            if (handlerFired) {
                //add this variable to prevent firing the handler twice.
                handlerFired = false;
                return;
            }

            if (confirm("Would you like to change the index from " + args._oldIndex + " to " + args._selectedIndex + "?")) {
                return;
            } else {
                handlerFired = true;
                // if we don't want to change the index, we need to set it to the old value.
                accordion.set_SelectedIndex(args._oldIndex);
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelect"
            ContentCssClass="accordionContent" FadeTransitions="True" FramesPerSecond="40"
            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="false"
            SelectedIndex="-1">
            <Panes>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <p>
                            Header1</p>
                    </Header>
                    <Content>
                        <p>
                            This is the content area!</p>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <p>
                            Header2</p>
                    </Header>
                    <Content>
                        <p>
                            This is the content area!</p>
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        <p>
                            Header3</p>
                    </Header>
                    <Content>
                        <p>
                            This is the content area!</p>
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>
    </div>
    </form>
</body>
</html>

The related thread url: http://forums.asp.net/t/1380353.aspx

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/02/09/1386977.html

aifengyi6776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
How to handle the Accordion's SelectedIndexChanged event at client side?

Some programmers would like to find a function to handle the Accordion’s SelectedIndexChanged event. Aswe allknow, the Accordion’s Client behavior has provided such twoevents:Codeadd_sel...
复制链接

扫一扫