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

最近需要遇到了这个问题   点击按钮复制链接的功能  果断度娘 谷哥。最后找到得解决方案 ZeroClipBoard 一款开源得js+Flash实现得剪切板操作

但是搜寻了众多例子之后 发现大多都是介绍一个页面只有一个固定的复制操作

而我得需求是这样 

一个动态Repeater 动态加载出各个地址 和复制按钮。

这个解决方案得原理是 ：

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

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

 

最后得解决方案 如下:

View Code

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

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

View Code

var LocalUrlManage = {
        Clip: null,
        ClipContainer: null,
        InitClip: function() {
            LocalUrlManage.Clip = new ZeroClipboard.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));
        }}

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

View Code

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

View Code

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

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

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

 

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

 

参考帮助： 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

ZeroClipBoard源码：/Files/peng-li/zeroclipboard.rar

 

转载于:https://www.cnblogs.com/peng-li/archive/2012/11/15/2771525.html