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

转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html

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("复制成功！");

});

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