當colorbox被觸發時指定colorbox的href屬性

Question

是否可以在點擊觸發colorbox的實際按鈕時指定colorbox的目標URL。

目前，我在我的文檔綁定功能，有這樣的：

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

然而，href屬性取決於一個下拉列表，我不知道我什麼時候綁定顏色框的按鈕的值。

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」也有可能），這顏色框前應激發提到開始在目標指定加載的內容給你機會去修改它

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

UPDATE 也許更簡單的方案 - 顏色框允許使用的函數，而不是靜態值的

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