0

ZClip (http://www.steamdev.com/zclip/) を使用して、複数のリンクの Web ページで「クリップボードにコピー」機能を有効にしています。このシナリオでは、次の 2 つの問題に直面しています。

  1. ZClip が使用されているページには、ユーザーが以前にアップロードした画像ファイル、ビデオ ファイル、オーディオ ファイル、およびドキュメントをリストする 4 つの div があります。これらの各 div は一度に 1 つずつ表示されるため、たとえば、ユーザーがオーディオ タブをクリックしてすべてのオーディオ ファイルを表示した後、ビデオ タブをクリックすると、オーディオ ファイルを表示していた div が非表示になり、ビデオ用の 1 つが表示されます。おそらく、ZClip は Flash を使用しているため、親要素が非表示になっている HTML 要素に依存する swf を「ロード」することができません。そのため、各タブをクリックして zclip インスタンスをロードします。これが問題 1 です。タブがクリックされるたびにリロードし続ける必要がないように、一度ロードしたいと思います。
  2. リンクで zclip を初期化するときに、各リンクで zclip afterCopy アクションを有効にしました。この afterCopy 関数では、警告ボックスが表示され、テキストがクリップボードにコピーされたことをユーザーに通知します。タブがクリックされるたびに zclip インスタンスをロードしているため、afterCopy アクションが複数回適用され、アラート ボックスが複数回ポップアップします。動画タブに 2 回アクセスしてリンクのコピー ボタンをクリックすると、2 つの警告ボックスが表示されます。ビデオ タブに 3 回アクセスすると、3 つのアラート ボックスが表示されます。

$('a.copy').zclip('remove');リンクで zclip を初期化する前に を使用してみました。この機能は zclip の Web サイトに表示されていますが、余分なアラート ボックスが表示されるわけではありません。リンクに関連付けられた swf のみが削除され、リンクにバインドされたイベントは削除されません。基本的に、次のいずれかを実行する方法についてのガイダンスが必要です。

  1. タブの選択時に zclip を適用する前に、適用された既存のアイテムから zclip を「バインド解除」します。
  2. または、適用されたリンクが非表示の div 内にあるという事実に関係なく、zclip が複数のリンクに一度だけ適用される何らかの方法
  3. またはさらに良いことに、複数の「コピー」リンクで使用する単一の zclip インスタンスのみを使用します。したがって、クリップボードに何かをコピーするためにクリックされた各リンクは、同じ zclip インスタンスを使用します。
4

1 に答える 1

5

Saganbyte、

いくつかのアプローチが思い浮かびます。

まず、4つのimage / video / audio /documentdivのそれぞれの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の任意の場所に配置し、ページの読み込み時に表示されるようにします
  • 「コピー」ボタンを現在の位置に対して機能させる
  • class="copyWrapper"各コンテンツdivに、「コピー」ボタンを移動できる空の要素（たとえば、スパンまたはdiv）を提供します。
  • .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();
    }
});

動的な1回限りの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 に答える