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

本文介绍了将其分配给隐藏div中的多个链接时出现zclip问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I m using ZClip (http://www.steamdev.com/zclip/) to enable a 'copy to clipboard' feature on a webpage on multiple links. I m facing 2 issues in this scenario:

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

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

I ve tried using the $('a.copy').zclip('remove'); before initializing zclip on links. This feature is shown on the zclip website but it has not resulted in getting rid of the extra alert boxes. It only removes the swf associated with the links and not the events bound to the links. Basically I d like some guidance in how I can do either of the following:

从其已应用的现有项目中'unbind'zclip应用于选择选项卡之前.
或以某种方式将zclip仅应用到多个链接一次，而不管其所应用的链接位于隐藏的div内部的事实
或者更好的是，仅使用一个zclip实例在多个复制"链接上使用.因此，如果每个被单击以将内容复制到剪贴板的链接都将使用相同的zclip实例.

推荐答案

Saganbyte，

Saganbyte,

我想到了几种方法.

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

First, let's assume the HTML of each of your four image/video/audio/documents divs is something like this:

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

这两种方法都依赖一个复制"按钮，在初始化zClip时可见:

Both approaches rely on a single "copy" button, which is visble when zClip is initialized:

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

您的HTML毫无疑问是不同的，但是要适应以下想法应该很简单.

Your HTML is undoubtedly different but it should be fairly simple to adapt the ideas below to suit.

此解决方案依赖于:

将复制"按钮放置在DOM中的任意位置，只要它在页面加载时可见即可.
使复制"按钮相对于其当前位置起作用
在每个内容div中提供一个带有class="copyWrapper"的空元素(例如span或div)，可以将复制"按钮移入其中
将复制"按钮移动到活动面板的.copyWrapper元素中.

placing the "copy" button anywhere in the DOM, providing it is visible on page load
making the "copy" button work relative to its current position
providing in each content div an empty element (eg. a span or div) with class="copyWrapper", into which the "copy" button can be moved
moving the "copy" button into the active panel's .copyWrapper element each time a tab is clicked.

按如下所示初始化zClip:

Initialize zClip as follows:

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为选项卡"):

And initialize the tabs (assuming jQuery UI "tabs") as follows :

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

静态复制"按钮

此解决方案依赖于:

Static "copy" button

This solution relies on :

更改页面设计以将复制"按钮放置在内容div之外
使复制"按钮可在当前可见的内容div上使用.

按如下所示初始化zClip:

Initialize zClip as follows:

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

动态一次性zClip初始化

此解决方案依赖于:

Dynamic one-time zClip initialization

This solution relies on :

在每个div首次显示时初始化每个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
        }
    }
});

这篇关于将其分配给隐藏div中的多个链接时出现zclip问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！