Js+Flash实现访问剪切板操作

 更新时间:2012年11月20日 09:27:17   作者:   我要评论
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥,最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥。最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作
但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作

而我得需求是这样
一个动态Repeater动态加载出各个地址和复制按钮。
这个解决方案得原理是:
拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板.
这时候就出现这么一个问题多个按钮如果每个按钮都加栽一遍flash得话会很吃内存并且动态得代码也不是很好写
最后得解决方案如下:
复制代码 代码如下:

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

1.现在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));
}}

2.使用js在页面加载完成得时候初始化剪切板的对象并设置鼠标手势和承载容器然后把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());
}.

3.在各个复制按钮上动态绑定事件并把响应的要复制得值或者控件传递到function中之后设置隐藏flash容器得left,top边距让其漂浮在触发该事件得按钮上并把要复制的值通过
Clip.setText('text')(插件提供得方法)传递给flash这样就实现了多个按钮复制得功能
未解决问题,原本按钮得hovercss切换效果flash遮盖之后就不太灵活了。用jquery动态添加样式效果也不太好。

相关文章

  • javascript管中窥豹 形参与实参浅析

    javascript管中窥豹 形参与实参浅析

    本想从语言的角度来分析,无奈功力不够,只能粗浅的尝试一下,于是称之管中窥豹,还望大牛指正
    2011-12-12
  • javascript中的变量作用域以及变量提升详细介绍

    javascript中的变量作用域以及变量提升详细介绍

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解
    2013-10-10
  • JavaScript判断DOM何时加载完毕的技巧

    JavaScript判断DOM何时加载完毕的技巧

    处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题;针对这个问题,本文给予适当的解决方法,仅供参考
    2012-11-11
  • switch语句的妙用(必看篇)

    switch语句的妙用(必看篇)

    下面小编就为大家带来一篇switch语句的妙用(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Cordova(ionic)项目实现双击返回键退出应用

    Cordova(ionic)项目实现双击返回键退出应用

    这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JavaScript实现的CRC32函数示例

    JavaScript实现的CRC32函数示例

    这篇文章主要介绍了JavaScript实现的CRC32函数,简单介绍了CRC32函数的概念和功能,并给出实例形式分析了CRC32函数的javascript实现与使用方法,需要的朋友可以参考下
    2016-11-11
  • JavaScript生成一个不重复的ID的方法示例

    JavaScript生成一个不重复的ID的方法示例

    这篇文章主要介绍了JavaScript生成一个不重复的ID的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • three.js中文文档学习之如何本地运行详解

    three.js中文文档学习之如何本地运行详解

    这篇文章主要给大家介绍了关于three.js中文文档学习之如何在本地运行的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • js canvas画布实现高斯模糊效果

    js canvas画布实现高斯模糊效果

    这篇文章主要为大家详细介绍了js canvas画布实现高斯模糊效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js改变style样式和css样式的简单实例

    js改变style样式和css样式的简单实例

    下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论