Question

我已经使用

在div类上实现了colorbox功能

<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>

现在我想知道是否有可能从javascript触发一个动态打开colorbox而不点击div元素的事件。

先谢谢

Answer 1

请参阅Jquery的trigger函数

Jquery Trigger

Answer 2

您可以这样称呼它：

$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});

编辑：你可能需要先运行它：

$.colorbox.init();

Answer 3

检查 http://api.jquery.com/trigger/

和 http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524

Answer 4

您可以使用的一个jQuery解决方案

$('selector').trigger('click');

这将正常工作，就像普通点击一样。

请注意，您需要在页面中加载jQuery。可以从其中一个CDN服务器加载。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Answer 5

此外，调用触发器的函数需要在未分配给元素的模式下调用ColorBox。

因此.trigger（）方法调用一个调用colorbox的函数，如下所示。

<强> $。颜色框（）

此方法允许您调用ColorBox而无需将其分配给元素。示例：$ .colorbox（{href：'login.php'}）;

点击colorbox docs了解详情。

Answer 6

当然，Rahul通过jquery click（）函数打开colorbox很容易。但首先，您需要将docReady代码更改为更像这样：

$(document).ready(function(){
        $("#example-id").click(function() {
            $(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
        });
})

请注意，我在单击处理程序中放置了带有“open：true”选项的代码。你可能已经看到在docReady上运行该选项会导致你的颜色框在页面加载时打开。

现在已经准备好了点击处理程序，你可以简单地打开这个框 - 好吧，当然是点击一下 - 但动态地使用这段代码：

$("#example-id").click();

只要你有这个，你的彩盒就会打开。所以你可以将它放在$ .ajax（）成功或错误处理程序或$ .load（）完成处理程序中。此外，我使用了一个单击处理程序，但如果您不需要单击功能，您可以轻松地将颜色框代码放在标准函数中，然后在需要时调用该函数。

顺便说一句，我将exampleClass更改为example-id，因为在click处理程序中附加了多个元素将产生对colorbox的多次调用。如果所有类打开相同的颜色框，则不会产生任何问题。如果你有兴趣看到同一个类打开不同颜色盒的例子，我可以扩展这个（但是我会从简单地将属性嵌入到标签中并在点击处理程序中查找它们开始）。

最后一点，colorbox通常与一个标签相关联，该标签将有一个href和一个标题。这是colorbox将从中获取内容和标题的位置。您只需将href和标题标签添加到您的。 Html验证器不会喜欢div中的href，所以如果这对你很重要，那么你应该将它添加到colorbox选项中：

$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })

我们可以使用javascript调用div类的click函数吗？

6 个答案: