Question

我使用ZClip（http://www.steamdev.com/zclip/）在多个链接的网页上启用“复制到剪贴板”功能。在这种情况下，我面临两个问题：

在使用ZClip的页面中，有4个div列出了用户之前上传的图像文件，视频文件，音频文件和文档。每个div都可以一次看到一个，例如，用户可以单击音频选项卡查看所有音频文件，然后如果他点击视频选项卡，显示音频文件的div将被隐藏，将播放一个视频，等等。也许是因为ZClip使用Flash，它无法在其父元素被隐藏的HTML元素中“加载”其依赖的swf。所以我在点击每个标签时加载zclip实例。这是问题之一。我想加载一次，而不是每次点击标签时都要继续重新加载。
我在每个链接上启用了zclip afterCopy操作，同时在其上初始化zclip。在此afterCopy功能中，将显示一个警告框，通知用户文本已复制到剪贴板。现在，因为每次单击选项卡时都会加载zclip实例，所以afterCopy操作会被多次应用，因此警报框会弹出多次。因此，如果我两次点击视频选项卡并单击复制链接按钮，那么我会看到2个警告框。如果我在视频标签上看到了三个警报框。

我在链接上初始化zclip之前尝试使用$('a.copy').zclip('remove');。此功能显示在zclip网站上，但它没有导致删除额外的警报框。它只删除与链接关联的swf，而不是绑定到链接的事件。基本上我想了解如何做以下任何一项指导：

'解除'zclip来自应用它的现有项目，然后在选择选项卡时应用它。
或zclip仅在多个链接上应用一次的方式，无论其应用的链接是否在隐藏的div内部
或者更好的是，只使用一个zclip实例在多个“复制”链接上使用。因此，如果单击的每个链接都将某些内容复制到剪贴板，则它将使用相同的zclip实例。

Answer 1

Saganbyte，

我想到了几种方法。

首先，让我们假设您的四个图像/视频/音频/文档div中的每一个的HTML都是这样的：

<div class="content" ...>
    ...
    <input class="copyMe" /><!-- the element whose value is to be copied -->
</div>

这两种方法都依赖于单个“复制”按钮，当zClip初始化时，该按钮是可见的：

<a id="copy">Copy</a>

您的HTML无疑是不同的，但是根据以下想法进行调整应该相当简单。

将“复制”按钮移动到活动div

此解决方案依赖于：

将“复制”按钮放在DOM中的任何位置，只要它在页面加载时可见
使“复制”按钮相对于其当前位置工作
在每个内容div中为class="copyWrapper"提供一个空元素（例如，span或div），其中“copy”按钮可以移动到其中
每次单击选项卡时，将“复制”按钮移动到活动面板的.copyWrapper元素中。

按如下方式初始化zClip：

var $copyButton = $('a#copy').zclip({
    path: 'js/ZeroClipboard.swf',
    copy: function() {
        return $(this).closest('div.content').find('.copyMe').val(); //$(this) is assumed correct
    }
});

并初始化选项卡（假设jQuery UI“tabs”），如下所示：

$(".selector").tabs({
    ...
    show: function(event, ui) {
        $(ui.panel).find('.copyWrapper').append($copyButton);
    }
});

静态“复制”按钮

此解决方案依赖于：

更改页面设计以将“复制”按钮放在内容div之外
使“复制”按钮适用于当前可见的任何内容div。

按如下方式初始化zClip：

$('a#copy').zclip({
    path: 'js/ZeroClipboard.swf',
    copy: function(){
        return $('.content:visible').find('.copyMe').val();
    }
});

动态一次性zClip初始化

此解决方案依赖于：

首次显示每个div的“复制”按钮（胸膜）
在初始化时引发布尔标志，以禁止在重新访问选项卡时进一步尝试重新初始化。

的javascript：

$(".selector").tabs({
    ...
    show: function(event, ui) {
        var $panel = $(ui.panel);
        if(!$panel.data('zClip_initialized')) { //If zClip not initialized in theis panel, then initialize it.
            $('a.copy').zclip({
                path: 'js/ZeroClipboard.swf',
                copy: function() {
                    return $(this).closest('tr').find('.....').val();//Lots of guesswork here. You should have written this already.
                }
            });
            $panel.data('zClip_initialized', true);//Raise a boolean flag to indicate that zClip is already initialized
        }
    }
});

将zclip分配给隐藏div中的多个链接时出现问题

1 个答案:

将“复制”按钮移动到活动div

静态“复制”按钮

动态一次性zClip初始化