Question

我试图让colorbox在我的移动应用程序中运行。由于某些触摸事件，我必须使用ontouchstart和onclick事件来触发我的颜色框模式。

我已在文档中指定了我的颜色框设置。在这里，我为所有class="ajax"创建了一个ajax颜色框。我不想为我添加的每个链接创建一个新函数。所以我仍然想使用href="ajax.html＆＃34;

如何动态填充onclick和ontouchstart，以便他们按照该链接的href进行操作？此外，他们应该能够在相同的ajax颜色框设置中打开它。

这就是我现在所拥有的，当然，它不起作用。

<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>

Answer 1

您可以在脚本标记中将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绑定。

使用颜色框模式的href动态更改onclick和ontouchstart

1 个答案: