CollapsiblePanelExtender: Могу ли я инициировать свертывание/развертывание из javascript на стороне клиента? (Инструментарий управления AJAX)

CollapsiblePanelExtender, по-видимому, в первую очередь предназначен для свертывания/расширения вещей в ответ на события мыши пользователя. Есть ли также хороший способ заставить расширитель сворачивать/разворачивать вещи в ответ на javascript на стороне клиента?

В моем конкретном случае у меня есть несколько CollapsiblePanelExtenders (и соответствующих им панелей) на странице, и мне интересно, могу ли я реализовать кнопку «развернуть все панели», выполнив что-то подобное строго на стороне клиента:

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

Вместо этого я могу реализовать эту логику на стороне сервера, если я выполняю полную обратную передачу, но моя страница загружается долго, и поэтому это не похоже на то, что это обеспечит очень удобный пользовательский интерфейс. Таким образом, я заинтересован в расширении/сворачивании клиентской части.

Похоже, это не тот вариант использования, который имели в виду люди из AJAX Control Toolkit, но я решил проверить.


person Chris    schedule 30.06.2009    source источник
comment
Если это сделано изначально в javascript, это определенно должно быть возможно. Однако мне не хочется рыться в источнике, поэтому, возможно, опубликуйте рассматриваемые функции?   -  person Ian Elliott    schedule 01.07.2009


Ответы (3)


Напишите следующий код в событии OnClick изображения/кнопки.

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

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

Надеюсь это поможет!

person Mathumitha    schedule 27.06.2013

У меня есть частично работающее решение.

Я последовал совету Яна и просмотрел исходный код инструментария. В CollapsiblePanelBehavior.debug.js вы можете видеть, что expandPanel(), по-видимому, предназначен как часть общедоступного интерфейса для поведения. Также есть get_Collapsed(). Ключом к доступу к этому поведению в javascript, по-видимому, является установка свойства BehaviorID в ваших тегах CollapsiblePanelExtender в ASP.NET.

Я изменил повторитель на своей странице, чтобы BehaviorID были предсказуемыми, в следующих строках:

<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. Может быть, я приберусь позже, или вы можете мне помочь.

person Chris    schedule 07.07.2009

Вы также можете просто переключать панели между свернутым и развернутым состояниями:

    function toggle() {
        var MenuCollapser = $find("name");
        MenuCollapser.togglePanel();
    }
person J.Steve    schedule 03.05.2011
comment
Конечно, хотя в этом случае я хочу развернуть все, а не переключать все, поэтому мне все равно нужно вызвать theBehavior.get_Collapsed и переключать только условно. - person Chris; 10.11.2011