JS+Zero Clipboard swf复制到剪贴板兼容浏览器(bind事件绑定函数)

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

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


2、创建对象，如：

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


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


三、简单配置

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


四、domo实例

CSS：

.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>

其他功能：

核心功能

第一步，导入 ZeroClipboard.js 文件：

<script type="text/javascript" src="ZeroClipboard.js"></script>

第二步，再设置 ZeroClipboard.swf 文件的路径：

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );

注意：以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。

第三步，然后就使用了：

var clip = new ZeroClipboard.Client(); // 新建一个对象       
clip.setHandCursor( true ); // 设置鼠标为手型       
clip.setText("哈哈"); // 设置要复制的文本。       
// 注册一个 button，参数为 id。点击这个 button 就会复制。       
//这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。       
clip.glue("copy-botton"); // 和上一句位置不可调换

这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。

其他函数

Zero Clipboard 还提供了一些其他的函数，其中有一些非常有用。

reposition() 方法
因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。不要紧，Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。

bind(window, "resize", function(){       
clip.reposition();       
});

bind 是一个跨浏览器的事件绑定函数。

这个想必大家都已知道。IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。下面进行封装。

/************************************      
* 添加事件绑定      
* @param obj : 要绑定事件的元素      
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".      
* @param fn : 事件处理函数      
************************************/       
function bind( obj, type, fn ) {       
if ( obj.attachEvent ) {       
obj['e'+type+fn] = fn;       
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}       
obj.attachEvent( 'on'+type, obj[type+fn] );       
} else       
obj.addEventListener( type, fn, false );       
}

例如添加一个页面点击事件：

bind(document, "click", function() {       
alert("Hello, World!!");       
});

hide() 和 show() 方法

这两个方法可以隐藏和显示 Flash 按钮。其中 show() 方法会调用 reposition() 方法。

setCSSEffects() 方法
当鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css ":hover", ":active" 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：

#copy-botton:hover{
border-color:#FF6633;
}
// 可以改成下面的 ":hover" 改成 ".hover"
#copy-botton.hover{
border-color:#FF6633;
}

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。

getHTML() 方法
如果你想自己实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如：

var html = clip.getHTML( 150, 20 );

你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是我测试下输出的 HTML 代码：

<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />

IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。

Zero Clipboard 事件处理

Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 。

clip.addEventListener( "load", function(client) {       
alert("Flash 加载完毕！");       
});

Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 "client" 。
还有 "load" 也可以写成 "onLoad"，其他的事件也可以这样。

其他事件还包括：

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较常用。
前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。

clip.addEventListener( "mouseOver", function(client) {       
var test = document.getElementById("test");       
client.setText( test.value ); // 重新设置要复制的值       
});

复制成功：

clip.addEventListener( "complete", function(){       
alert("复制成功！");       
});

好了，就介绍到这里吧。赶快自己试验下吧。