將其分配給隱藏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
        }
    }
});