CollapsiblePanelExtender:我可以开始崩溃/从客户端JavaScript扩展

2019-10-16 17:57发布

该CollapsiblePanelExtender似乎主要设计为折叠/展开以响应用户的鼠标事件的事情。 有也是一个很好的方式来获得扩展到折叠/展开以响应客户端的JavaScript的东西呢?

在我的具体情况,我公司拥有一批在页面上CollapsiblePanelExtenders(及其相应面板)的,我想知道如果我可以做这样的事情严格对客户端实行“展开所有面板”按钮:

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

我可以实现这个逻辑的服务器端,而不是如果我做了全面的回传,但我的网页需要很长的时间来加载,所以这似乎并不像它会提供一个非常漂亮的用户体验。 因此,我有兴趣做展开/折叠的客户端。

看起来这是不是一个用例的AJAX控件工具包的人脑子里想的,但我想我会检查。

Answer 1:

写入以下代码中的图像/按钮的OnClick事件

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

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

希望这可以帮助!



Answer 2:

我现在有一个部分工作液。

我跟着伊恩的建议,并通过该工具包源看去。 在CollapsiblePanelBehavior.debug.js ,你可以在expandPanel()显然是打算作为公共接口的行为的一部分。 还有一个get_Collapsed() 在JavaScript中访问这些行为的关键似乎是设置BehaviorID你的财产CollapsiblePanelExtender在ASP.NET标签。

我修改了中继我的网页上,以便BehaviorID s为predictible,沿着这些线路:

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

这导致与命名行为collapsebehavior1collapsebehavior2collapsebehavior3等。

有了这个做,我能够扩大客户端上的所有的可折叠面板如下:

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只有第一元件膨胀,然后有控制工具包代码内一个Javascript错误)。

这会都显得格外难看给你所有的JavaScript利弊。 也许我以后会清理东西,或者你可以帮助我。



Answer 3:

你也可以切换面板收合/展开状态之间进行切换:

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


文章来源: CollapsiblePanelExtender: Can I initiate collapse/expand from client-side javascript? (AJAX Control Toolkit)