CollapsiblePanelExtender：我可以从客户端javascript启动崩溃/扩展吗？ （AJAX控件工具包）

The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?

CollapsiblePanelExtender似乎主要用于折叠/扩展内容以响应用户鼠标事件。是否还有一种很好的方法可以让扩展器崩溃/扩展以响应客户端javascript?

In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I'm wondering if I could implement an "expand all panels" button by doing something like this strictly on the client side:

在我的特定情况下,我在页面上有一些CollapsiblePanelExtenders(及其相应的面板),我想知道是否可以通过在客户端严格执行此类操作来实现“展开所有面板”按钮:

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

I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn't seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.

我可以实现这个逻辑服务器端,如果我做了一个完整的回发,但我的页面需要很长时间才能加载,所以这似乎不会提供非常光滑的用户体验。因此,我有兴趣进行扩展/折叠客户端。

It seems like this isn't a use case the AJAX Control Toolkit people had in mind, but I thought I'd check.

看起来这不是AJAX Control Toolkit人们想到的用例,但我想我会检查一下。

3 个解决方案

#1

Write the following code in the OnClick event of Image/button

在Image /按钮的OnClick事件中编写以下代码

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

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

Hope this helps!

希望这可以帮助!

#2

I have a partly working solution now.

我现在有一个部分工作的解决方案。

I followed Ian's suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There's also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.

我按照Ian的建议,查看了工具包源代码。在CollapsiblePanelBehavior.debug.js中,您可以将expandPanel()显然作为行为的公共接口的一部分。还有一个get_Collapsed()。在javascript中访问这些行为的关键似乎是在ASP.NET中的CollapsiblePanelExtender标记上设置BehaviorID属性。

I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:

我修改了我的页面上的转发器,以便BehaviorID可以预测,沿着这些方向:

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

This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..

这导致名为collapsebehavior1,collapsebehavior2,collapsebehavior3等行为。

With this done, I'm able to expand all the collapsible panels on the client as follows:

完成后,我可以扩展客户端上的所有可折叠面板,如下所示:

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;
        }
    }
}

I'm sure using $find in a loop like that is really inefficient, but that's what I have so far.

我肯定在循环中使用$ find是非常低效的,但这就是我到目前为止所拥有的。

Also, it doesn't work on Firefox for some reason. (On FF only the first element expands, and then there's a Javascript error inside the Control Toolkit code.)

此外,由于某种原因,它不适用于Firefox。 (在FF上只有第一个元素展开,然后在Control Toolkit代码中出现Javascript错误。)

This will all seem extremely ugly to all you javascript pros. Maybe I'll clean things up later, or you can help me out.

这对你所有的javascript专家来说都显得非常难看。也许我会稍后清理一下,或者你可以帮助我。

#3

You can also just toggle the panels to switch between collapsed/expanded states:

您也可以切换面板以在折叠/展开状态之间切换:

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