JQuery UI:Accordion回调

时间:2010-03-24 13:54:15

标签: javascript jquery jquery-ui

当我在手风琴上打开一个部分时,我需要我的javascript才能进行回调,因为我现在打开或关闭一个部分时会进行回调,因为我只使用了一个点击功能。有没有办法可以修改现有的点击功能,只有在激活给定的部分时才会运行?

我当前的点击功能:

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

谢谢!

编辑:

我已经用手风琴的另一部分尝试了这个并且它无法正常工作:

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

3 个答案:

答案 0 :(得分:2)

您可以使用“change event

$('.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”并进行处理

修改

根据新信息{collapsible:true,active: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”

答案 1 :(得分:1)

对承办人的一个改进回答:在将index与false比较时使用三等于避免第一个手风琴元素匹配。

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

请记住,在评估条件时,double equals将执行类型转换。

答案 2 :(得分:0)

如果所有的手风琴部分都被dfault关闭,你可以用切换替换click事件,让第二个功能简单地做什么。

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

更好的解决方案是在活动部分添加一个类,并在调用负载之前检查该类。

$("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 
        });
    }
});