2

我有一個CollapsiblePanelExtender與通常的擴展和摺疊按鈕....我想有一個點擊事件觸發時擴展器擴展和一個不同的點擊事件發生時,擴展器摺疊。但最重要的事件是它何時擴展。即使在崩潰時,我也可以無需點擊即可生活。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'); }); 

回答

3

我假設你在談論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'); }); 

讓我知道如果您有任何問題。我已經做了一些定製的各種解決方案,這些對象的公平位。

+0

是的,我說的是ASP.NET AJAX控件工具箱可摺疊的面板擴展 我試圖以編程方式通過代碼添加它背後使用非嵌入腳本 – aggitan 2009-05-27 18:36:50

+0

此代碼仍然會爲擴展添加服務器 - 工作側。擴展器創建一個javascript對象,您可以使用$ find命令獲取引用。 – Jonas 2009-05-27 19:38:00

0

首先,您需要爲面板或控件用戶點擊創建客戶端(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");

於是就點擊,得到這個客戶的狀態,將其保存在cookie和你的好去!