動態更改onclick和ontouchstart與href爲colorbox模式

我試圖讓我的移動應用程序中的colorbox工作。由於一些觸摸事件，我必須使用ontouchstart和onclick事件來激活我的colorbox模式。動態更改onclick和ontouchstart與href爲colorbox模式

我已經在文檔中指定了我的colorbox設置。在這裏，我爲所有class="ajax"創建了一個ajax colorbox。我不想爲我添加的每個鏈接創建一個新的函數。所以，我還是想用href="ajax.html「

我如何動態填充onclick和ontouchstart所以他們這個鏈接的href？還有，他們應該能夠在同阿賈克斯顏色框設置打開這個。

這就是我現在這當然，不工作有

<head> 
<script> 

$(document).ready(function(){ 

    $(".ajax").colorbox({ 
      transition: 'fade', 
      speed:200, 
      initialWidth: '0', 
      initialHeight: '0', 
      width: '800px', 
      maxWidth:'95%', 
      maxHeight:'95%', 
      opacity: .6 
      }); 

    }); 

    function modalAjax(){ 
    $.colorbox({href: }); 

} 

</script> 

</head> 

<a href="ajax.html" ontouchstart="modalAjax()" onclick="modalAjax()" class="ajax"> Link works on mobile and desktop </a>

來源

2014-09-26 WIWIWWIISpitFire

您可以更改modalAjax功能類似的腳本標籤如下：

<script> 
    function modalAjax(extraOptions){ 

     var _defaultSettings = { 
       transition: 'fade', 
       speed:200, 
       initialWidth: '0', 
       initialHeight: '0', 
       width: '800px', 
       maxWidth:'95%', 
       maxHeight:'95%', 
       opacity: .6 
      } 
      ,settings = _defaultSettings; 

     $.extend(settings, extraOptions); 
     $.colorbox(settings); 
    } 
</script>

然後，您可以像這樣在你的HTML標記執行你的事件綁定：

<a href="ajax.html" ontouchstart="modalAjax({href: $(this).attr('href')})" onclick="modalAjax({href: $(this).attr('href')})" class="ajax"> Link works on mobile and desktop </a>

或在JavaScript，以及如果要應用到帶班「Ajax」的所有DOM元素的行爲：

$(document).ready(function(){ 
    $(".ajax").bind('touchstart click', function() { 
     modalAjax({ href: $(this).attr('href') }); 
    }); 
});

如果您選擇執行後者，請記住刪除內聯HTML綁定。

來源

2014-09-26 16:51:08 Edem

動態更改onclick和ontouchstart與href爲colorbox模式

回答

相關問題