在触发colorbox时指定colorbox的href属性

Question

是否可以在单击触发colorbox的实际按钮时指定colorbox的目标URL。

目前，我的文档绑定函数中包含以下内容：

$(function () {
    $(".button").colorbox({ width: "50%", height: "50%%", iframe: true, href: "/abc", opacity: 0.6 });
});

但是，href属性依赖于下拉列表的值，当我第一次将colorbox绑定到按钮时，我不知道该值。

Answer 1

你可以这样..。这种方法绕过了插件的自动onClick处理。在弄清楚要使用的href值之后，您可以在自己的事件上调用插件。

在下面的代码片段中，var myHref是静态的，但是您可以编写一些js来从您的数据源设置它。

顺便说一句，我认为你在高度属性上有一个打字错误-重复%符号？？

<script>
        $(document).ready(function(){
            $('.button').click( function() {
                var myHref = "/someHREF";
                $.colorbox({
                    width: "50%", 
                    height: "50%", 
                    iframe: true, 
                    href: myHref, 
                    opacity: 0.6
                });             
            });
        });             
</script>

Answer 2

正如在Colorbox Docs中提到的

您可以设置回调"onOpen“(可能还有"onLoad”)，该回调应该在colorbox开始加载目标中指定的内容之前触发，这样您就有机会修改它

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%%", 
        iframe: true, 
        href: "/abc", 
        opacity: 0.6,
        onOpen: function(){
          // modify target here
        }
    });
});

更新可能更简单的解决方案- colorbox允许使用函数而不是静态值

$(function () {
    $(".button").colorbox({ 
        width: "50%", 
        height: "50%", 
        iframe: true, 
        href: function(){
            // Since I can't see your markup I can't provide exact solution
            // but if your .button elm is an anchor then use
            var url = $(this).attr('href');
            // if you are obtaining the url from diff. elm, grab it from there
            // such as $('#your_element).attr('href') 
            return url;
        }, 
        opacity: 0.6
    });
});