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

Question

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

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

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

1. 在应用选项卡之前将zclip应用于已应用的现有项目.
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中提供空元素(例如,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
        }
    }
});