第8课:JQuery复制到剪切板

复制到剪切板是一个很常用的功能,但是要兼容各个浏览器,却不那么简单

最新版ZeroClipboard用法:
1.先包含必要文件
<script type="text/javascript" src="plugin/copy/ZeroClipboard.js"></script>
2.必须在点击复制按钮事件之前执行:
var clip = new ZeroClipboard($('#copy'+id) );
clip.setText($("#url_"+id).text());
clip.on("ready", function(readyEvent) {
clip.on("aftercopy", function(event) {
    alert('复制成功');
});
});
clip.on('error', function(event) {
    ZeroClipboard.destroy();
});
为什么要强调在点击事件之前执行呢?
因为new ZeroClipboard是用来生成flash的,如果你在点击的时候才执行,需要点击2次才能复制成功
点击之前可以用window.onload也可以用其他方式,只要保证之前初始化就可以


如果你的页面是一个列表,每一行都有一个复制按钮,该怎么写?
实现N个点击复制
<a id="copy1" data=1>点击复制</a>
<p id="url_1">被复制内容1</p>
<a id="copy2" data=2>点击复制</a>
<p id="url_2">被复制内容2</p>

1.先给每个复制按钮加一个copy的class
2.每个复制按钮加一个id,值为copy . id拼接
3.写jquery
$('.copy').each(function(){
    var id = $(this).attr('data');
    var clip = new ZeroClipboard($('#copy'+id) );
    clip.setText($("#url_"+id).text());
    clip.on("ready", function(readyEvent) {
    clip.on("aftercopy", function(event) {
            alert('复制成功');
        });
    });
    clip.on('error', function(event) {
        ZeroClipboard.destroy();
    });
})