ZeroClipBoard多复制按钮实现（转）

网上能搜索到的例子大部分都是基于单复制按钮来实现的，如果一个页面中有好多个复制按钮，就不好搞了。

如图：

 

这个解决方案得原理是 ：

 

     拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.

这时候就出现这么一个问题 多个按钮 如果每个按钮都加栽一遍flash得话  会很吃内存 并且动态得代码也不是很好写 

 

最后得解决方案 如下：

1. 现在Body中放置一个隐藏得flash容器  绝对定位层

 

<div id="ClipSwf" style="left:-1000px;position:absolute;width:80px;height:25px;" ></div>

 2.使用js在页面加载完成得时候初始化剪切板的对象 并设置鼠标手势 和承载容器  然后把flash输出成html输出到容器中。

var clipManage = {
	clip: null,
	ClipContainer: null,
	InitClip: function() {
		page.clip = new ZeroClipboard.Client();
		page.ClipContainer = $("#ClipSwf");
		page.clip.setHandCursor(true);
		page.clip.setCSSEffects(true);
		page.clip.addEventListener('complete', function (client){
        	$.messager.alert('提示：', '复制完成!', 'info');
        });
		page.ClipContainer.html(page.clip.getHTML(55, 22));
	},
	SetClipValue: function(obj, idx){
		var row = $('#hisList').datagrid('selectRow', idx).datagrid('getSelected');
		var offset = $(obj).offset();
		page.ClipContainer.offset({left: offset.left, top: offset.top});
		page.clip.setText(row.cdnPath);
	}
}

 3.在各个复制按钮上动态绑定事件 并把响应的要复制得值或者控件传递到function中 之后设置隐藏flash容器得left,top边距 让其漂浮在触发该事件得按钮上  并把要复制的值 通过

Clip.setText('text') (插件提供得方法) 传递给flash  这样就实现了多个按钮复制得功能

<a href="javascript:;" id="copyurl'+rowData.id+'" onmouseover="page.SetClipValue(this, ' + rowIndex + ')">复制</a>

 

参考：

 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

 Js+Flash实现剪切板操作(页面多个复制按钮)