イベントをクリックしてCollapsiblePanelExtender

Question

私はいつもの拡張および縮小ボタンを使用してCollapsiblePanelExtenderを持っている....私はエクステンダーを拡張し、エクステンダーが折りたたまれているときに別のクリックイベントがオフに解雇されたときにオフに解雇クリックイベントを持っていると思います。それが延長されたときしかし、最も重要なイベントです。私も崩壊にクリックせずに住むことができます。

私は、オンラインで使用して検索を見つけた例のほとんど：「CollapsiblePanelExtenderを」「イベントをクリックして」エクステンダーを持っているが、でもそれ以外のクリックに基づいて反応するところ...

私がクリックしたときにエクステンダーはJSをオフに解雇したい。

どのように私はこれを達成するについて行くべきですか？ 私は間違った検索文字列を使用して/間違った質問をしているだろうか？

            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

私はあなたがASP.Net AJAXコントロールツールキットの話をしていると仮定します。次のように折りたたみと展開イベントにハンドラを追加することができます：

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

私は、さまざまなソリューションでこれらのオブジェクトの一部をカスタマイズするの公平なビットを行ってきた...ご質問があれば私に教えてくださいます。

Answer 2

まず、あなたがパネルまたはコントロールのユーザーのために、クライアント側（JavaScriptの）onClickイベントを作成する必要がクリックされます。

だから、そこ型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>

次：。この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>

お知らせは、ページがロードされたとき、あなたの折りたたみ可能なパネルの状態で隠しフィールドがあります。それは真か偽になります。ページのソースに移動し、あなたがそれを見つけるだろう、それを検索します。

次に追加します：

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

ですからクリックで、行くためにクッキーとあなたの良いに保存し、このクライアントの状態を取得します！