0

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

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

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

  1. 在选择选项卡之前将其从已应用的现有项目中“取消绑定”zclip。
  2. 或某种方式 zclip 仅应用于多个链接一次，而不管其应用的链接是否在隐藏的 div 内
  3. 或者更好的是，只使用一个 zclip 实例在多个“复制”链接上使用。因此，如果单击每个链接以将某些内容复制到剪贴板，它会使用相同的 zclip 实例。
4

1 回答 1

5

萨根比特，

我想到了几种方法。

首先，假设您的四个图像/视频/音频/文档 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 中提供一个带有 的空元素（例如 span 或 div）class="copyWrapper"，“复制”按钮可以移动到其中
  • .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
        }
    }
});
于 2012-06-08T03:13:00.653 回答