基于ZeroClipboard实现动态Repeater多按钮复制功能

动态Repeater多按钮复制方案概述

近期在处理点击按钮复制链接的功能时，经过搜索调研，最终确定了使用ZeroClipboard这一开源方案。该方案基于JavaScript与Flash技术，旨在实现剪切板操作。

在查阅大量示例后发现，大多数教程仅演示了页面中固定且唯一的复制操作场景。

然而，实际业务需求更为复杂。

需要在一个动态加载的Repeater控件中，为每个生成的地址项及其对应的复制按钮提供支持。

该解决方案的核心原理如下。

具体而言，通过JavaScript动态加载一个透明的Flash对象，并将其覆盖在目标点击按钮之上。随后，在该Flash的承载元素上绑定事件，动态将需要复制的文本值传递给Flash，由Flash完成对剪切板的访问与写入。

若为每个按钮单独加载Flash实例，将导致内存占用过高，且动态代码编写复杂。

最终的优化解决方案如下。

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

首先，在Body中放置一个绝对定位且隐藏的Flash容器。

 
varLocalUrlManage={
Clip:null,
ClipContainer:null,
InitClip:function(){
LocalUrlManage.Clip=newZeroClipboard.Client();
LocalUrlManage.ClipContainer=$("#ClipSwf");
LocalUrlManage.Clip.setHandCursor(true);
LocalUrlManage.Clip.setCSSEffects(true);
LocalUrlManage.Clip.addEventListener("complete",function(client,text){
Tip.RightTip("#UrlAdd",text+","+"复制成功!");
}); 
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25));
}} 

动态事件绑定与值传递机制

其次，在页面加载完成时，使用JavaScript初始化剪切板对象，设置鼠标手势及承载容器，并将Flash渲染为HTML输出至该容器。

 
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">点击复制</button>

 
SetClipValue:function(obj,SelectorEl){
//BrowserClip.IEClip($(SelectorEl).val());
varoffset=$(obj).offset();
LocalUrlManage.ClipContainer.offset({left:offset.left,top:offset.top});
LocalUrlManage.Clip.setText($(SelectorEl).val());
}. 

最后，在各个复制按钮上动态绑定事件，将对应的待复制值或控件传递至函数中。通过设置隐藏Flash容器的left和top边距，使其漂浮在触发事件的按钮上方，并利用Clip.setText('text')方法（插件提供）将值传递给Flash，从而实现了多个按钮的复制功能。

未解决问题,原本按钮得hovercss切换效果flash遮盖之后就不太灵活了。用jquery动态添加样式效果也不太好。

复制代码