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

Question

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:

1. In the page where ZClip is used, there are 4 divs listing out image files, video files, audio files and documents that a user had previously uploaded. Each of these divs is seen one at a time, so for example, a user would click on the audio tab to view all audio files, then if he clicked on the videos tab, the div that showed the audio files would be hidden and the one for videos would be shown and so on. Maybe because ZClip uses Flash, it is not able to 'load' its dependent swf in a HTML element whose parent element was hidden. So I load the zclip instances on clicking each of the tabs. This is problem one. I d like to load it once and not have to keep reloading everytime a tab was clicked.
2. I have enabled a zclip afterCopy action on each of the links while initializing zclip on them. In this afterCopy function a alert box is displayed to inform the user that the text was copied to the clipboad. Now since I m loading zclip instance every time a tab is clicked, the afterCopy action is getting applied more than once and hence the alert box pops up more than once. SO if I came to the videos tab twice and clicked a copy link button then I d see 2 alert boxes. If I came on the video tab thrice then 3 alert boxes.

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:

1. 'unbind' zclip from existing items it was applied on before applying it on selecting a tab.
2. or some way that zclip is applied on multiple links only once regardless of the fact that the links its applied on are inside hidden divs
3. or better still, use only one single zclip instance to use on multiple 'copy' links. So if each link that was clicked to copy something to the clipboard, it d use the same zclip instance.

Answer 1

Saganbyte,

A couple of approaches come to mind.

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>

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

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

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

Move "copy" button to the active div

This solution relies on :

• 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.

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
    }
});

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 :

• changing the page design to place the "copy" button outside the content divs
• making the "copy" button work on whichever content div is currently visible.

Initialize zClip as follows:

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

Dynamic one-time zClip initialization

This solution relies on :

• initializing each div's "copy" buttons (pleural) when they are first shown
• raising a boolean flag on initialization to inhibit further attempts to re-initialize when tabs are re-visited.

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
        }
    }
});