ZeroClipboard实现复制功能

    在浏览网页时可以看到复制功能，如：在看一个带有源码的demo时，可以点击复制，把源码复制到剪切板，然后粘贴到本地review，ie浏览器可以使用浏览器内置对象(window.clipboradData)
的setData方法，但无法兼容其他浏览器，下面介绍ZeroClipboard:

一、原理
ZeroClipboard利用透明的flash让其漂浮在复制按钮之上，将需要复制的内容传入flash，在通过flash的复制功能把传入的内容复制到剪切板。

二、结构

1、ZeroClipboard其实是国外的一个js类库，源码结构如：

var ZeroClipboard = {
    //这里是属性和方法.....    
};
 
ZeroClipboard.Client.prototype = {
    //扩展方法
};

2、创建对象，如：

1 2	`var` `clip =` `new` `ZeroClipboard.Client();` `//调用扩展方法`


点击这里下载文件，查看github源码，百度文库。


三、简单配置

下载下来的ZeroClipboard文件有一个js和swf文件，在js文件中需要正确配置moviePath路径，可以配置相对和绝对路径，也可以调用实例对象的moviePath()设置正确的路径;
另一个需要注意的地方是本地测试时，需要Apache服务器。


四、domo实例

CSS:

1	`.box {` `width:` `300px;` `height:` `100px;` `margin:` `100px` `auto; }`

HTML:

<div class="box">
    <textarea id="J_share_text" class="share-text"></textarea>
    <input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
</div>

JavaScript:

(function() {
    $(function() {
        var clip = new ZeroClipboard.Client();
        clip.setHandCursor(true);
        clip.glue('J_copy_clipboard_data');
        clip.addEventListener('mouseDown',function() {
            clip.setText(ZeroClipboard.$('#J_share_text').val());
        });
    });      
})()

完整demo：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo实例</title>
<link href="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.css" rel="stylesheet">
<style>
.box { width: 300px; height: 100px; margin: 100px auto; }
</style>
</head>
 
<div class="box">
    <textarea id="J_share_text" class="share-text"></textarea>
    <input class="btn" id="J_copy_clipboard_data" type="button" value="复制">
</div>
 
<body>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/zeroclipboard.js"></script>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.js"></script>
 
<script>
(function() {
    $(function() {
        var clip = new ZeroClipboard.Client();
        clip.setHandCursor(true);
        clip.glue('J_copy_clipboard_data');
        clip.addEventListener('mouseDown',function() {
            clip.setText($('#J_share_text').val());
        });
    });   
})()
</script>
 
</body>
</html>