jquery - Jquery - 花式框和回调

Question

我对fancybox有问题。
我想写一个在fancybox打开时运行的函数。如何以及何时调用该函数？

例子：

function myFunc() {
    alert("Opened!");
}

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': myFunc(), // This not working! It call function when page is loaded
    'frameWidth': 920,
    'frameHeight': 530
});

Answer 1

而不是myFunc()使用myFunc. 在 javascript 中，带有括号（和/或 args）的函数意味着您要调用它。没有它们的函数名称意味着您只需要对该函数的引用（这可能是 fancybox 想要的）

Answer 2

这有效

$("#element").fancybox({
    onStart     :   function() {
        return window.confirm('Continue?');
    },
    onCancel    :   function() {
        alert('Canceled!');
    },
    onComplete  :   function() {
        alert('Completed!');
    },
    onCleanup   :   function() {
        return window.confirm('Close?');
    },
    onClosed    :   function() {
        alert('Closed!');
    }
});

Answer 3

使其工作的最新方法是使用 afterShow 或 beforeShow：

$("a#registrace").fancybox({
  beforeShow   : function() {
    alert('its working!');
    validate_reg_form();
  }
});

我正在通过 ajax 加载注册表单，我需要启用表单验证。在这两种情况下（之前和之后），内容已经加载。

Answer 4

实际上，在检查文档时，您的选项列表中有错字...

你有callBackOnShow，但应该是callbackOnShow（小写 b）

Answer 5

它应该是：-

function myFunc() {
    alert("Opened!");
}

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': myFunc, // no brackets
    'frameWidth': 920,
    'frameHeight': 530
});

或者，您可以创建一个匿名函数...

$('.content a').fancybox({ 
    'hideOnContentClick': false ,
    'callBackOnShow': function() { alert('hello'); },
    'frameWidth': 920,
    'frameHeight': 530
});

Answer 6

'callbackOnShow': myFunc

小写 b 因为选项区分大小写，并且 myFunc 上没有括号，因为您希望将函数作为选项传递，而不是调用它。

Answer 7

正如您的标题所说的“Jquery - fancybox 和回调”，您可以在选项卡回调下找到 fancybox 2 插件的完整回调选项列表。

http://fancyapps.com/fancybox/#docs

如果您使用旧的fancybox，也许升级到fancybox2，因为新插件具有更好的功能，更多的控制。