Пользовательский интерфейс jQuery: обратные вызовы Accordion

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-пользовательский интерфейс

Вопрос:

Мне нужно, чтобы мой javascript выполнял обратный вызов только тогда, когда я ОТКРЫВАЮ раздел в accordion, на данный момент он выполняет обратный вызов, когда я открываю или закрываю раздел, потому что я использую только функцию click. Есть ли способ изменить существующую функцию click, чтобы она запускалась только при активации данного раздела?

Моя текущая функция click:

 $("a#mimetypes").click(function() {
    $("span#mimetypesthrobber").loading(true, { max: 1500 })
    $.getJSON("../mimetypes", function(data) {
        //callback
    });
});
  

Спасибо!

Редактировать:

Я уже пробовал это с другой частью accordion, и это не работало должным образом:

 $('.ui-accordion').bind('accordionchange', function(event, ui) {
if (ui.newHeader == "Encoders") {
EncodersGet();
}
});
  

Ответ №1:

вы можете использовать «событие изменения«

 $('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});
  

и получите доступ, например, к «newHeadert» и выполните свою обработку

Редактировать

согласно новой информации {сворачиваемый: true, активный: false}

 $(document).ready(function() {
            var $acc = $('#accordion').accordion({ collapsible: true,
                   active : false ,
                   change : function (event, ui)
                   {
                                var index = $acc.accordion( "option", "active");
                    if( index === false){
                                 // all are close
                                }
                                else{
                                 // 0-based index of the open section
                                }

                   }
            });
        });
  

«опция активна» вернет вам индекс открытого раздела или «false», если все разделы закрыты

Ответ №2:

Одно улучшение в ответе разработчика: используйте тройное равенство при сравнении индекса с false, чтобы избежать совпадения первого элемента accordion.

 if (index === false) {
  // All are closed
} else {
  // 0-based index of the open section
}
  

Пожалуйста, помните, что double equals будет выполнять преобразование типов при оценке условий.

Ответ №3:

Если все разделы accordion закрыты по умолчанию, вы могли бы заменить событие click на toggle и заставить вторую функцию просто ничего не делать.

 $("a#mimetypes").toggle(function() {
    $("span#mimetypesthrobber").loading(true, { max: 1500 });
    $.getJSON("../mimetypes", function(data) {
        //callback 
    });
},
function() {
    //do nothing
});
  

Лучшим решением было бы добавить класс в активный раздел и проверить наличие этого класса перед вызовом load .

 $("a#mimetypes").click(function() {
    if ($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
    else {
        $(".active").removeClass("active"); //Edit - remove all active classes to account for this section being closed by the opening of another
        $(this).addclass("active");

        $("span#mimetypesthrobber").loading(true, { max: 1500 });
        $.getJSON("../mimetypes", function(data) {
            //callback 
        });
    }
});
  

Комментарии:

1. Недостаток вашего лучшего решения заключается в том, что вы можете закрыть раздел в accordion, нажав на заголовок другого раздела. Поэтому класс никогда не удаляется, даже после того, как accordion больше не активен.

2. Я должен также указать, что мой css для accordion {сворачиваемый: true, активный: false}