CollapsiblePanelExtender evento Click

Question

Eu tenho um um CollapsiblePanelExtender com o habitual estender e recolher botões .... eu gostaria de ter um incêndio clique evento fora quando o extensor é estendida e um incêndio evento de clique diferente fora de quando o extensor é recolhido. Mas o evento mais importante é quando está estendida. Eu poderia viver sem um clique, mesmo em colapso.

A maioria dos exemplos que eu encontrei on-line em busca usando: "CollapsiblePanelExtender" "clique evento" está a ter o extensor de reagir com base em um clique, mesmo mais onde ...

Eu quero o extensor para disparar um JS quando clicado.

Como devo ir sobre como realizar isso? Am I fazendo a pergunta errada / usando as seqüências de pesquisa errado?

            CollapsiblePanelExtender extendatron = new CollapsiblePanelExtender();
            extendatron.ID = "cpe" + MenuId;
            extendatron.TargetControlID = "pnlContent" + strMenuId;
            extendatron.ExpandControlID = "pnlMenu" + strMenuId;
            extendatron.CollapseControlID = "pnlMenu" + strMenuId;
            extendatron.Collapsed = bCollapsed;
            extendatron.TextLabelID = strMenuName;
            extendatron.ExpandedText = m_strButtonLabelHide;
            extendatron.CollapsedText = m_strButtonLabelShow;
            extendatron.ImageControlID = "imglnk" + strMenuId;
            extendatron.CollapsedImage = "~/App_Themes/default/nbExpand.gif";
            extendatron.ExpandedImage = "~/App_Themes/default/nbCollapse.gif";
            extendatron.SuppressPostBack = true;
            extendatron.ScrollContents = false;

            var extender = $find('extendatron'); //this would be <%=myExtender.ClientID%>
            extender.add_collapsed( function() { alert('collapsed'); });
            extender.add_expanded( function() { alert('expanded'); });

Answer 1

Eu suponho que você está falando sobre o ASP.Net AJAX Control Toolkit. Você pode adicionar manipuladores para os eventos recolhidos e expandidos da seguinte forma:

//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId'); 
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });

Deixe-me saber se você tiver quaisquer perguntas ... Eu fiz um pouco de personalização de alguns desses objetos em várias soluções.

Answer 2

Primeiro, você precisa criar um do lado do cliente (JavaScript) evento onClick para os usuários do painel ou controle estão clicando em.

Então, vá lá tipo onClick="functionName();"

<asp:Panel ID="pDocumentHeaderTitle" runat="server" CssClass="collapsePanelHeader" onClick="setCollapseState();"> 
       <asp:Image ID="imgDocumentHeaderHeader" runat="server" ImageUrl="~/images/wadown.gif"/>Document Header
       <asp:Label ID="lblDocumentHeaderHeader" runat="server">(Show)</asp:Label>
</asp:Panel>

Em seguida:. Adicione esta javascript

<script type="text/javascript">
    function setCollapseState() {
        var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
        setCookie("cpeDocumentHeaderStatus", extenderDocumentHeader.value, 5)
    }

    //W3Schools cookie code.
    function setCookie(c_name, value, exdays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
        document.cookie = c_name + "=" + c_value;
    }

    //W3Schools cookie code.
    function getCookie(c_name) {
        var i, x, y, ARRcookies = document.cookie.split(";");
        for (i = 0; i < ARRcookies.length; i++) {
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == c_name) {
                return unescape(y);
            }
        }
    }

</script>

Observe, quando a página é carregada, há um campo oculto que é o seu estado painéis desmontáveis. Vai ser verdadeira ou falsa. Ir para página fonte e procurar por ela que você vai encontrá-lo.

Em seguida, adicione:

var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");

Assim, em clique, obter este estado de clientes, salve-o em um cookie e seu bom para ir!