CollapsiblePanelExtender：我可以從客戶端JavaScript啓動摺疊/展開嗎？（AJAX Control Toolkit）

CollapsiblePanelExtender似乎主要是爲了響應用戶鼠標事件而摺疊/展開事物。是否還有一種很好的方式來讓擴展器崩潰/擴展響應客戶端JavaScript的東西？CollapsiblePanelExtender：我可以從客戶端JavaScript啓動摺疊/展開嗎？（AJAX Control Toolkit）

在我的特殊情況下，我在頁面上有許多CollapsiblePanelExtender（及其相應的面板），我想知道是否可以通過在客戶端上嚴格執行「展開所有面板」按鈕方：

for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)

如果我這樣做，我可以實現這個邏輯的服務器端，而不是一個完整的回傳，但我的網頁需要很長的時間來加載，所以這似乎並不像它會提供一個非常漂亮的用戶經驗。因此，我有興趣做展開/摺疊客戶端。

看起來這不是AJAX Control Toolkit人們想到的用例，但我想我會檢查一下。

來源

2009-06-30 Chris

如果它原本是用javascript來完成的話，那一定是可以的。不過，我不想通過源代碼翻找，所以也許發佈有問題的函數？ – 2009-06-30 20:46:20

我現在有一個部分工作的解決方案。

我遵循伊恩的建議，並瀏覽了工具包源代碼。在CollapsiblePanelBehavior.debug.js中，你可以認爲expandPanel()顯然是作爲行爲的公共接口的一部分。還有一個get_Collapsed()。在javascript中訪問這些行爲的關鍵似乎是在ASP.NET中的CollapsiblePanelExtender標籤上設置BehaviorID屬性。

我修改了中繼我的網頁上，以便BehaviorID s爲predictible，沿着這些線路：

<ajaxToolkit:CollapsiblePanelExtender 
    BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>" 
    ID="CollapsiblePanelExtender" runat="server" />

這導致名爲collapsebehavior1，collapsebehavior2，collapsebehavior3等行爲..

有了這個完成後，我可以按如下方式展開客戶端上的所有可摺疊面板：

function expandAll() { 
    var i = 0; 
    while (true) { 
     i++; 
     var name = 'collapsebehavior' + i; 
     var theBehavior = $find(name); 
     if (theBehavior) { 
      var isCollapsed = theBehavior.get_Collapsed(); 
      if (isCollapsed) { 
       theBehavior.expandPanel(); 
      }    
     } else { 
      // No more more panels to examine 
      break; 
     } 
    } 
}

我確定在這樣的循環中使用$find效率非常低，但這就是我迄今爲止的結果。

此外，由於某些原因，它不適用於Firefox。（在FF上，只有第一個元素展開，然後在Control Toolkit代碼中出現Javascript錯誤。）

這對所有JavaScript javascript專業人員來說都顯得非常難看。也許我以後會清理一些東西，或者你可以幫我解決問題。

來源

2009-07-07 00:54:07 Chris

你也可以切換面板收合/展開狀態之間進行切換：

function toggle() { 
     var MenuCollapser = $find("name"); 
     MenuCollapser.togglePanel(); 
    }

來源

2011-05-03 19:03:10

當然，雖然在這種情況下，我想「展開全部」，而不是「全部切換」，所以我仍然需要調用Behavior.get_Collapsed，並且僅在該條件上切換條件。 – Chris 2011-11-10 03:45:19

寫下面的代碼在圖像的OnClick事件/按鈕

<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/> 

function ExpandCollapse() { 
    $find("collapsibleBehavior1").set_Collapsed(true); 
    $find("collapsibleBehavior2").set_Collapsed(true); 
}

希望這有助於！

來源

2013-06-27 13:55:56 Mathumitha

CollapsiblePanelExtender：我可以從客戶端JavaScript啓動摺疊/展開嗎？ （AJAX Control Toolkit）

回答

相關問題

CollapsiblePanelExtender：我可以從客戶端JavaScript啓動摺疊/展開嗎？（AJAX Control Toolkit）