CollapsiblePanelextender 클릭 이벤트

Question

일반적인 확장 및 붕괴 버튼이있는 AA CollapsiblePanelextender가 있습니다 .... Extender가 확장 될 때 클릭 이벤트가 발사되고 Extender가 무너질 때 다른 클릭 이벤트가 발사하고 싶습니다. 그러나 가장 중요한 사건은 확장 된시기입니다. 나는 붕괴조차도 클릭하지 않고도 살 수있었습니다.

"CollapsiblePanelextender" "Click Event"를 사용하여 온라인 검색을 찾은 대부분의 예제는 다른 곳에서도 클릭에 따라 Extender가 반응합니다 ...

클릭하면 Extender가 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 Control Toolkit에 대해 이야기하고 있다고 가정합니다. 다음과 같이 붕괴되고 확장 된 이벤트에 핸들러를 추가 할 수 있습니다.

//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");

따라서 클릭하면이 클라이언트 상태를 유지하고 쿠키로 저장하고 좋은 가십시오!