CollapsiblePanelExtender Clicca Event

Question

Ho un un CollapsiblePanelExtender con il solito estendere e pulsanti crollo .... mi piacerebbe avere un evento click sparare quando l'estensore è esteso e un diverso evento click sparare quando l'estensore è compressa. Ma l'evento più importante è quando si è esteso. Potrei vivere senza un click anche su collasso.

La maggior parte degli esempi che ho trovato in rete alla ricerca utilizzando: "CollapsiblePanelExtender" "click evento" sta avendo l'estensore reagiscono basa su un clic anche altrove ...

Voglio l'estensione per sparare un JS quando si fa clic.

Come devo fare per realizzare questo? Sto chiedendo la domanda sbagliata / utilizzando le stringhe di ricerca sbagliate?

            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

Presumo che stai parlando del ASP.Net AJAX Control Toolkit. È possibile aggiungere i gestori per gli eventi compressi ed espansi come segue:

//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'); });

Fatemi sapere se avete domande ... Ho fatto un bel po 'di personalizzare alcuni di questi oggetti in varie soluzioni.

Answer 2

In primo luogo, è necessario creare un lato client (JavaScript) evento onClick per gli utenti del pannello di controllo o sono cliccando su.

Quindi, andare in 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>

Avanti:. Aggiungere questo 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>

Si noti, quando la pagina viene caricata, v'è un campo nascosto che è il tuo stato pannelli pieghevole. Sarà vero o falso. Vai alla sorgente della pagina e la ricerca di esso lo troverete.

Quindi aggiungere:

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

Così il click, ottenere questo stato clienti, salvarlo in un cookie e il vostro bene ad andare!