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

Question

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

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

我试过使用$('a.copy').zclip('remove'); 在初始化链接上的zclip之前。 此功能显示在zclip网站上，但并未消除多余的警告框。 它仅删除与链接关联的swf，而不删除绑定到链接的事件。 基本上，我希望获得有关如何执行以下任一操作的指导：

1. 在选择选项卡之前将其从已应用的现有项目中“解除绑定”。
2. 或以某种方式将zclip仅应用到多个链接一次，无论其应用的链接是否在隐藏的div内
3. 甚至更好的是，仅使用一个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为“标签”）：

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