CollapsiblePanelExtender Clickイベント

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

は、このクライアントの状態を取得するクッキーに保存し、あなたの良いは行き：

は、その後追加します！