1- 引用文件。下载后会得到两个核心文件ZeroClipboard.js和ZeroClipboard.swf,在项目中引用其中一个就可以。
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.js"></script>
2- 加载ZeroClipboard对象,并实现复制功能。
代码如下:
//设定flash文件引用路径。
ZeroClipboard.setMoviePath('http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.swf');
//创建ZeroClipboard对象
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
//加载事件,在mouseOver事件中将需要复制的内容传到flahs文件中保存
clip.addEventListener('mouseOver', function(client) {
clip.setText($('#IndInfo').val());
});
//复制成功后弹出对话框
clip.addEventListener('complete', function(client, text) {
alert("Copied text to clipboard:\n\n" + text);
});
//指定实现复制功能对象
clip.glue('Copy');
更多内容请参考下面的:
引用来自:http://twohuo.com/zeroclipboard.html
1、首先到ZeroClipboard官方网站 去下载需要的文件,将其中的ZeroClipboard.js 和ZeroClipboard10.swf 上传到您的网站。
2、根据提示修改好以下代码,然后添加到你的网页代码的<head></head>之间。
02 | < script type = "text/javascript" src = "ZeroClipboard.js" ></ script > <!--替换为正确的ZeroClipboard.js路径 --> |
03 | < script type = "text/javascript" > |
04 | ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' ); <!--替换为正确的ZeroClipboard10.swf路径--> |
06 | <!--btn_id,btn_id2用于定位flash,test_str为传入的文本,isId为0或者控件ID--> |
07 | function copy_code(btn_id,btn_id2,test_str,isId) { |
08 | clip = new ZeroClipboard.Client(); |
09 | clip.setHandCursor(true); |
10 | clip.addEventListener('mouseOver', function (client) { |
11 | <!-- update the text on mouse over--> |
12 | <!--传入ID时,用ID的value替换文本。--> |
14 | test_str = document.getElementByIdx_x(isId).value; |
16 | clip.setText(test_str); |
18 | clip.addEventListener('complete', function (client, text) { |
19 | alert("复制成功,你可以使用Ctrl+V 粘贴。"); |
22 | clip.glue(btn_id,btn_id2); |
3、使用的时候,先用一个style="position:relative;"的div来定位,然后在页面控件中使用onmouseover事件来调用copy_code()函数,如下是参考示例:
| <!-- 下面这个div必须。。。否则可能导致定位不准。 --> |
| < div id = "d_clip_container" style = "position:relative;" > |
| < input type = "button" id = "btn_copy" value = "复制" onmouseover = "copy_code(this.id,'d_clip_container'," http://twohuo.com/",0);" /> |
| <!-- 参数4说明:传入id时,使用该id的值重新设置参数3;传入0时则不改变参数3. --> |