我怎样才能得到一个简单的ZeroClipboard复制到剪贴板设置工作jQuery上的jsFiddle在一个单一的点击？

问题描述

我努力让ZeroClipboard在jQuery上下文中工作。我之后的基本用法是在点击时将每个 div 的文本与类 copy 剪切。

下面的jsFiddle使用稳定的ZeroClipboard v1.3.3进行双击。

html：

 < div class =copy>点击此文字复制此文字< / div> 
< div class =copy>或点击此文字复制此文字< / div> 
< p class =debug flash-loaded> Flash player is loaded。< / p> 
< p class =debug confirm-copy>复制文本。< / p> 
   

js：

  $（document）.ready（function（）{
 ZeroClipboard.config（{moviePath：'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf',debug：true }）; 
 var client = new ZeroClipboard（$（'。copy'））; 
 client.on（'load'，function（client）{
 $（'。flash-loaded '）.fadeIn（）; 
 client.on（'complete'，function（client，args）{
 client.setText（$（this）.text（））; 
 // client.setText（'Manually Set Text to This，instead of the div of the contents'）; 
 console.log（client）; 
 $（'。confirm-copy'）。fadeIn（）; 
}）; 
}）; 
}）; 
  

是的，我知道这里还有其他类似的ZeroClipboard问题，但是我还没有看到一个简单的jsFiddle版本实际上工作。我所遇到的现有的小提琴不是被弃用，就是因为某些其他的原因而不能使用。

另外，ZeroClipboard的演示在他们自己的网站对于相同的版本似乎工作得很好，所以我知道这是可能的。

解决方案

这是一个可行的解决方案。在上，我改变了 client.on（'complete'... 到 client.on（'mouseover'... ）在第一次点击之前初始化ZeroClipboard的Flash文件

<$ （）{
$ {document} .ready（function（）{
ZeroClipboard.config（{moviePath：'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf '，debug：true}）;

var client = new ZeroClipboard（$（'。copy'））;
client.on（'load'，function（client）{$ b （'flashback'）。text（'Flash player loaded at'+ $ .now（））。fadeIn（）;
client.on（'mouseover'，function（client，args） {
client.setText（$（this）.text（））;
$（'。confirm-copy'）。text（'text copied at'+ $ .now（））。fadeIn ）;
}）;
}）;
}）;

I'm struggling to get ZeroClipboard working within a jQuery context. The basic usage I'm after is clipping the text of each div with the class copy on click.

The following jsFiddle works on double click using the stable ZeroClipboard v1.3.3

http://jsfiddle.net/bEQ6R/

html:

<div class="copy">Click this text to copy this text</div>
<div class="copy">Or click this text to copy this text</div>
<p class="debug flash-loaded">Flash player is loaded.</p>
<p class="debug confirm-copy">Text Copied.</p>
<textarea placeholder="Use this textarea to test your clipboard"></textarea>

js:

$(document).ready(function() {
    ZeroClipboard.config({ moviePath: 'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf',debug: true });    
    var client = new ZeroClipboard($('.copy'));
    client.on('load', function(client) {
        $('.flash-loaded').fadeIn();
        client.on('complete', function(client, args) {
            client.setText($(this).text());
            // client.setText('Manually Set Text to This instead of the contents of the div');
            console.log(client);
            $('.confirm-copy').fadeIn();
        });
    });
});

Yes, I understand there are other similar ZeroClipboard questions here, but I have yet to see a simple jsFiddle version actually work. Existing fiddles I've come across are either deprecated or no longer functional for some other reason.

Also, ZeroClipboard's demo on their own site http://zeroclipboard.org/ for the same version appears to work just fine, so I know it's possible.

解决方案

Here is a working solution. On the fiddle I changed client.on('complete'... to client.on('mouseover'... to initialize the ZeroClipboard flash file before the first click.

$(document).ready(function() {
    ZeroClipboard.config({ moviePath: 'http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.2.swf',debug: true });

    var client = new ZeroClipboard($('.copy'));
    client.on('load', function(client) {
        $('.flash-loaded').text('Flash player loaded at ' + $.now()).fadeIn();
        client.on('mouseover', function(client, args) {
            client.setText($(this).text());
            $('.confirm-copy').text('text copied at ' + $.now()).fadeIn();
        });
    });
});

这篇关于我怎样才能得到一个简单的ZeroClipboard复制到剪贴板设置工作jQuery上的jsFiddle在一个单一的点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！